css之ShadowDOM

默默@85

于 2024-08-23 10:09:20 发布

阅读量742

点赞数 10

文章标签： css javascript

本文链接：https://blog.csdn.net/qq_40278396/article/details/140709304

版权

shadow-root 是用来表示一个元素的 Shadow DOM 根节点。Shadow DOM 是 Web 组件技术的一部分，它提供了一个封装的 DOM 和样式范围，使元素的内部结构和样式不会影响到外部文档，也不会被外部文档所影响。例如video标签.

定义

Shadow DOM 允许你创建一个与主文档 DOM 分离的 “影子” 树，这个树中的节点是完全封装的。这种封装提供了以下几个好处：

样式隔离：Shadow DOM 内部的样式和主文档的样式相互隔离。
DOM 隔离：Shadow DOM 内部的 DOM 节点与主文档的 DOM 节点隔离，不会相互干扰。
可复用性：可以创建可复用的、自包含的组件。

当你在开发者工具中查看一个带有 Shadow DOM 的元素时，你会看到一个 #shadow-root 标记。这表示该元素有一个关联的 Shadow DOM。Shadow DOM 的内容会显示在 #shadow-root 的子树下。

创建shadowDom

步骤

定义一个自定义元素：使用 ES6 类继承 HTMLElement。
附加 Shadow DOM：在自定义元素的构造函数中使用 this.attachShadow({ mode: 'open' }) 或 { mode: 'closed' } 创建 Shadow DOM。
添加内容到 Shadow DOM：将元素和样式插入 Shadow DOM。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM Example</title>
</head>
<body>
    <!-- 自定义元素 -->
    <my-element></my-element>
    <script>
        // 定义一个新的类，继承自 HTMLElement
        class MyElement extends HTMLElement {
            constructor() {
                super();
                // 创建一个开放模式的 Shadow DOM
                const shadowRoot = this.attachShadow({ mode: 'open' });

                // 创建并添加样式到 Shadow DOM
                const style = document.createElement('style');
                style.textContent = `
                    .text {
                        color: red;
                        font-size: 20px;
                    }
                `;
                shadowRoot.appendChild(style);

                // 创建并添加内容到 Shadow DOM
                const div = document.createElement('div');
                div.className = 'text';
                div.textContent = 'Hello, Shadow DOM!';
                shadowRoot.appendChild(div);
            }
        }

        // 将自定义元素注册为一个新标签
        customElements.define('my-element', MyElement);
    </script>
</body>
</html>

定义类：

使用 class MyElement extends HTMLElement 定义了一个新的自定义元素类。

构造函数：

在构造函数中调用 super() 以确保正确继承。
使用 this.attachShadow({ mode: 'open' }) 创建一个开放模式（open）的 Shadow DOM。
mode: 'open' 表示 Shadow DOM 是开放的，可以通过 JavaScript 进行访问。
mode: 'closed' 表示 Shadow DOM 是关闭的，无法通过 JavaScript 直接访问。

添加样式：

创建一个 style 元素，并将其添加到 Shadow DOM 中，以定义 Shadow DOM 内部元素的样式。

添加内容：

创建一个 div 元素，设置其文本内容和样式类，然后将其添加到 Shadow DOM 中。

注册自定义元素：

使用 customElements.define('my-element', MyElement) 将自定义元素注册为一个新标签 <my-element>。

修改shadowDom样式

修改内联样式

document.addEventListener('DOMContentLoaded', () => {
	//获得shadowDom 的容器元素(宿主节点)
    const shadowHost = document.querySelector('your-shadow-host');
    //获得shadowDom 的根节点
    const shadowRoot = shadowHost.shadowRoot;
    //获得shadowDom 的内部子节点
    const targetElement = shadowRoot.querySelector('.my-element');
    
    if (targetElement) {
    	//修改样式
        targetElement.style.color = 'red';
        targetElement.style.backgroundColor = 'yellow';
    } else {
        console.error('Element not found in shadow DOM.');
    }
});

::part伪元素

只适用于元素上已有 part 属性标记的暴露给外部样式表的部分
自定义的shadowDom使用::part,需要与part属性一起使用

示例代码

<style>
    /* 使用 ::part 选择器样式化 shadow DOM 内部的元素 */
    my-element::part(title) {
        color: blue;
        font-size: 24px;
    }
    my-element::part(content) {
        background-color: lightgrey;
        padding: 10px;
        border: 2px solid black;
    }
</style>
<body>
    <!-- 自定义元素 -->
    <my-element></my-element>
    <script>
        class MyElement extends HTMLElement {
            constructor() {
                super();
                const shadowRoot = this.attachShadow({ mode: 'open' });
                const style = document.createElement('style');
                //使用part属性,暴露给外部样式表
                style.textContent = `
                    .title {
                        part: title;
                        font-weight: bold;
                    }
                    .content {
                        part: content;
                    }
                `;
                shadowRoot.appendChild(style);

                const title = document.createElement('div');
                title.className = 'title';
                title.textContent = 'This is the Title';
                shadowRoot.appendChild(title);
                
                const content = document.createElement('div');
                content.className = 'content';
                content.textContent = 'This is the content of the custom element.';
                shadowRoot.appendChild(content);
            }
        }
        // 注册自定义元素
        customElements.define('my-element', MyElement);
    </script>
</body>