Shadow DOM 是 Web 标准，它允许开发者将 UI 组件封装成独立的 DOM 树，从而提高应用的模块化和可维护性。本教程将带您了解 Shadow DOM 的基本概念和用法。

Shadow DOM 的特点

  • 封装性：将 UI 组件和样式封装在独立的 DOM 树中，不会影响到全局样式。
  • 模块化：易于管理和维护，每个组件都是独立的。
  • 可定制性：可以自定义组件的样式和行为。

使用 Shadow DOM

以下是一个简单的 Shadow DOM 示例：

<div id="my-shadow-root">
  <div class="my-shadow-element">Hello, Shadow DOM!</div>
</div>

.my-shadow-element {
  color: red;
  font-size: 20px;
}

在上面的示例中，<div id="my-shadow-root"> 是宿主元素，<div class="my-shadow-element"> 是 Shadow DOM 中的元素。通过在宿主元素上设置 shadowRoot 属性，我们可以访问 Shadow DOM。

const shadowRoot = document.getElementById('my-shadow-root').shadowRoot;
shadowRoot.appendChild(document.createElement('div'));
shadowRoot.querySelector('.my-shadow-element').innerText = 'Shadow DOM is cool!';

扩展阅读

想了解更多关于 Shadow DOM 的内容，可以阅读 Web Component 官方文档。

图片

Shadow DOM 中的元素被封装在一个独立的 DOM 树中，就像一个“影子”一样。

Shadow DOM 示例