Web Components 设计指南之 Shadow DOM

随着 Web 技术的发展，前端开发中涉及的功能模块日益复杂。Web Components 是一种用于构建可重用组件的标准化技术，旨在让开发者能够将具有相似功能或样式的组件封装并重用。Web Components 由三个主要部分组成：Custom Elements、Shadow DOM 和 HTML Templates，本文将着重讲述其中的 Shadow DOM。

什么是 Shadow DOM？

Shadow DOM 是 Web Components 标准的一部分，它允许开发者创建和使用独立的 DOM 树和样式规则，而不会影响到 DOM 树和样式规则的其他部分。换句话说，Shadow DOM 允许我们创建一个完全隔离的作用域，通过它可以创建自己的 HTML 元素与样式规则，同时防止由于 CSS 选择器的错位而引发的样式冲突。

如何使用 Shadow DOM？

要使用 Shadow DOM，首先需要了解两个概念：Shadow Host 和 Shadow Tree。Shadow Host 是一个普通的 DOM 元素，它通过 Shadow DOM API 的 createElement 方法来创建所需的 Shadow Tree。Shadow Tree 是由 Shadow DOM 创建的 DOM 树，它可以包含 HTML 元素和 Shadow DOM 中定义的自定义元素。

下面我们来看一个简单的示例代码：

// www.javascriptcn.com code example
<div id="root"></div>

<script>
  // 创建 Shadow Host
  const root = document.querySelector('#root');
  const shadowRoot = root.attachShadow({ mode: 'open' });

  // 在 Shadow Tree 中添加 HTML 元素和自定义元素
  shadowRoot.innerHTML = `
    <style>
      h1 {
        color: red;
      }
    </style>

    <h1>Hello, Shadow DOM!</h1>
  `;
</script>

在上面的示例中，我们通过 attachShadow 方法将一个 Shadow Host 添加到 id 为 root 的 DOM 元素中，并且通过 innerHTML 方法向 Shadow Tree 中添加了一个 h1 元素和一个样式规则。需要注意的是，在调用 attachShadow 方法时，我们设置了 mode 参数为 open，这意味着该 Shadow DOM 是开放的，我们可以通过 JavaScript 访问它并修改其中的内容。另一个可选的值是 closed，这将创建一个封闭的 Shadow DOM，只能通过特定的 API 方法来修改其中的内容。

如何使用 CSS 在 Shadow DOM 中设置样式？

在 Shadow DOM 中设置样式需要使用 Shadow DOM 的样式规则而非全局样式规则。Shadow DOM 样式规则与全局样式规则不同，它们只会应用于 Shadow Tree 中的元素。在 Shadow DOM 样式规则中，我们可以使用 ::slotted 伪类来选择插入到自定义元素中的子元素，而不是直接选择他们。

以下是一些示例代码：

// www.javascriptcn.com code example
<custom-element>
  <p>Hello, Shadow DOM!</p>
  <button>Click Me!</button>
</custom-element>

<script>
  class CustomElement extends HTMLElement {
    constructor() {
      super();

      // 创建 Shadow DOM
      const shadow = this.attachShadow({ mode: 'open' });

      // 添加样式规则
      const style = document.createElement('style');
      style.textContent = `
        :host {
          display: block;
          background-color: #f5f5f5;
        }

        /* 选择在 custom-element 内的 p 元素 */
        ::slotted(p) {
          color: red;
        }

        /* 选择 custom-element 内的 button 元素 */
        ::slotted(button) {
          background-color: blue;
          color: white;
        }
      `;

      shadow.appendChild(style);

      // 添加 Shadow Tree 的子元素
      const slot = document.createElement('slot');

      shadow.appendChild(slot);
    }
  }

  customElements.define('custom-element', CustomElement);
</script>

在上面的示例中，我们创建了一个自定义元素 custom-element，并且通过 Shadow DOM API 创建了一个 Shadow Tree。我们还在其中添加了一些样式规则，并且使用了 ::slotted 伪类来选择 Shadow Tree 中的子元素。

结束语

Shadow DOM 是 Web Components 技术中一个非常重要的部分，它允许我们使用隔离的作用域来创建可重用的组件。本文介绍了如何使用 Shadow DOM，以及如何通过 CSS 在 Shadow DOM 中设置样式。希望这篇文章对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d771f9a941bf7134d5ae9d