Shadow DOM 不继承 HTML 的样式

Shadow DOM 是 Web 组件技术中的一个重要概念，它允许开发者封装 HTML、CSS 和 JavaScript 代码，使得这些代码在组件内部独立运行，而不会影响到页面的其他部分，Shadow DOM 的一个重要特性就是不继承 HTML 的样式，这意味着，当你在一个组件中使用 Shadow DOM 时，该组件内部的样式不会对外部页面产生影响。

下面，我们将详细介绍如何使用 Shadow DOM，并解释其不继承 HTML 样式的原因。

1. 什么是 Shadow DOM？

Shadow DOM 是一种浏览器提供的原生技术，它允许开发者将一个元素的子树封装在一个虚拟的 DOM 树中，这个虚拟的 DOM 树被称为“影子树”，影子树中的节点和外部的 DOM 树是隔离的，它们之间不会相互影响，这使得我们可以在一个元素内部创建独立的 CSS 作用域，从而实现样式隔离。

2. 如何创建一个 Shadow DOM？

要创建一个 Shadow DOM，你需要使用 element.attachShadow() 方法，这个方法接受一个选项对象作为参数，用于配置影子树的行为，以下是一个简单的示例：

const myElement = document.querySelector('#myelement');
const shadowRoot = myElement.attachShadow({ mode: 'open' });

在这个示例中，我们首先选择了一个 ID 为 myelement 的元素，然后调用了 attachShadow() 方法来创建一个影子树。mode 选项设置为 'open'，表示影子树是一个开放的影子树，它可以访问外部的文档。

3. 如何在影子树中添加内容？

要在影子树中添加内容，你可以使用 appendChild()、insertBefore()、cloneNode() 等方法。

const paragraph = document.createElement('p');
paragraph.textContent = '这是一个在影子树中的内容';
shadowRoot.appendChild(paragraph);

在这个示例中，我们创建了一个 <p> 元素，并将其文本内容设置为 “这是一个在影子树中的内容”，我们使用 appendChild() 方法将这个元素添加到影子树中。

4. Shadow DOM 为什么不继承 HTML 的样式？

Shadow DOM 不继承 HTML 的样式，这是因为影子树中的节点和外部的 DOM 树是隔离的，当一个元素被封装在影子树中时，它的样式规则不会应用到影子树中的节点上，相反，影子树中的节点只会应用影子树上定义的样式规则。

这种隔离机制使得我们可以在一个元素内部创建独立的 CSS 作用域，从而实现样式隔离，这对于开发可重用的 Web 组件非常有用，因为它可以避免样式冲突和样式污染。

5. 如何在影子树中定义样式？

要在影子树中定义样式，你可以在 <style> 标签中编写 CSS 规则，然后将这个标签添加到影子树中。

const style = document.createElement('style');
style.textContent = 'p { color: red; }';
shadowRoot.appendChild(style);

在这个示例中，我们创建了一个 <style> 标签，并将其文本内容设置为一个将段落文本颜色设置为红色的 CSS 规则，我们使用 appendChild() 方法将这个标签添加到影子树中，这样，影子树中的段落文本就会显示为红色。

Shadow DOM 是一种强大的 Web 组件技术，它允许开发者封装 HTML、CSS 和 JavaScript 代码，实现样式隔离，通过使用 attachShadow() 方法创建一个影子树，并在其中添加内容和样式，你可以实现一个独立的、不会影响到外部页面的 Web 组件。