34. 了解过 shadow Dom 吗

总结

Shadow DOM 是一种强大的工具，能够帮助开发者实现组件的封装和样式隔离。通过使用 Shadow DOM，可以构建更加模块化、可维护的 Web 应用程序。

概述

Shadow DOM 是 Web Components 技术的一部分，它允许开发者将一个封装的、独立的 DOM 树附加到页面中的某个元素上。这个树被称为 Shadow DOM，它与主文档的 DOM 树隔离，从而实现了样式和结构的封装。

主要特点

1. 封装性：Shadow DOM 内部的样式和结构不会影响到页面的其他部分，也不会被外部样式覆盖。
2. 作用域隔离：Shadow DOM 内部的 CSS 样式是局部作用域的，不会影响到外部 DOM。
3. 可组合性：可以通过 <slot> 元素将外部内容插入到 Shadow DOM 中，实现内容的动态组合。

基本用法

创建 Shadow DOM

const hostElement = document.getElementById("host");
const shadowRoot = hostElement.attachShadow({ mode: "open" });

• mode: 'open'：允许通过 JavaScript 访问 Shadow DOM。
• mode: 'closed'：不允许外部访问 Shadow DOM。

添加内容到 Shadow DOM

shadowRoot.innerHTML = `
  <style>
    p {
      color: red;
    }
  </style>
  <p>这是一个 Shadow DOM 的内容。</p>
`;

使用 <slot> 插入外部内容

<!-- 主文档中的 HTML -->
<my-component>
  <p>这是插入到 Shadow DOM 中的内容。</p>
</my-component>

// Shadow DOM 内容
shadowRoot.innerHTML = `
  <style>
    .container {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
  <div class="container">
    <slot></slot>
  </div>
`;

Shadow DOM 与主文档的区别

常见应用场景

1. 组件化开发：Shadow DOM 非常适合用于构建可复用的 Web 组件。
2. 样式隔离：防止组件内部的样式污染全局样式。
3. 封装复杂逻辑：将复杂的 UI 逻辑封装在 Shadow DOM 中，保持主文档的简洁。

注意事项

1. 浏览器兼容性：Shadow DOM 在现代浏览器中得到了广泛支持，但在某些旧浏览器中可能需要 polyfill。
2. 性能优化：虽然 Shadow DOM 提供了封装性，但过度使用可能会影响性能，建议合理使用。