HTML 影子 DOM

HTML 影子 DOM（Shadow DOM）是 Web 组件技术的一部分，它允许开发者创建封装的 HTML 结构、样式和行为。通过影子 DOM，开发者可以构建独立的组件，这些组件的内部结构和样式不会与页面的其他部分发生冲突。

什么是影子 DOM？

影子 DOM 是一种将组件的内部实现细节隐藏起来的技术。它允许你将一个 DOM 子树附加到某个元素上，这个子树被称为“影子树”（Shadow Tree）。影子树与主文档的 DOM 树是分离的，这意味着影子树中的样式和脚本不会影响主文档，反之亦然。

影子 DOM 的核心概念

影子宿主（Shadow Host）：影子 DOM 附加到的元素。
影子根（Shadow Root）：影子树的根节点，通过它你可以访问影子树中的元素。
封装（Encapsulation）：影子 DOM 的样式和脚本不会泄漏到外部，外部的样式和脚本也不会影响影子 DOM。

创建影子 DOM

要创建一个影子 DOM，首先需要选择一个元素作为影子宿主，然后通过 attachShadow 方法附加一个影子根。

<div id="host"></div>

<script>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>
      p {
        color: blue;
      }
    </style>
    <p>这是一个影子 DOM 中的段落。</p>
  `;
</script>

代码解释

我们选择了一个 div 元素作为影子宿主。
使用 attachShadow 方法创建了一个影子根，{ mode: 'open' } 表示影子根可以通过 JavaScript 访问。
在影子根中插入了一些 HTML 和 CSS，这些内容只会影响影子 DOM 内部。

输出

<div id="host">
  #shadow-root (open)
    <style>
      p {
        color: blue;
      }
    </style>
    <p>这是一个影子 DOM 中的段落。</p>
</div>

备注

影子 DOM 中的样式不会影响主文档中的元素，主文档中的样式也不会影响影子 DOM。

影子 DOM 的实际应用

影子 DOM 在现代 Web 开发中非常有用，尤其是在构建可重用的 Web 组件时。以下是一些实际应用场景：

1. 自定义元素

影子 DOM 通常与自定义元素（Custom Elements）一起使用，以创建封装的组件。

<my-component></my-component>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
        <style>
          p {
            color: green;
          }
        </style>
        <p>这是一个自定义组件中的段落。</p>
      `;
    }
  }

  customElements.define('my-component', MyComponent);
</script>

2. 样式封装

影子 DOM 可以确保组件的样式不会影响页面上的其他元素，也不会被页面上的其他样式影响。

<div id="host"></div>
<p>这是主文档中的段落。</p>

<script>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>
      p {
        color: red;
      }
    </style>
    <p>这是影子 DOM 中的段落。</p>
  `;
</script>

提示

影子 DOM 的样式封装特性使得它非常适合构建独立的 UI 组件库。

总结

HTML 影子 DOM 是一种强大的技术，它允许开发者创建封装的、独立的 Web 组件。通过影子 DOM，你可以确保组件的内部结构和样式不会与页面的其他部分发生冲突，从而提高代码的可维护性和可重用性。

附加资源

练习

创建一个自定义元素，并使用影子 DOM 封装其内部结构和样式。
尝试在影子 DOM 中使用 JavaScript 操作影子树中的元素。

通过实践这些练习，你将更好地理解影子 DOM 的工作原理及其在现代 Web 开发中的应用。

什么是影子 DOM？​

影子 DOM 的核心概念​

创建影子 DOM​

代码解释​

输出​

影子 DOM 的实际应用​

1. 自定义元素​

2. 样式封装​

总结​

附加资源​

练习​