JavaScript中的Web Components与Shadow DOM详解

描述
Web Components是一套浏览器原生支持的组件化技术，包含Custom Elements（自定义元素）、Shadow DOM（影子DOM）、HTML Templates（HTML模板）三个核心规范。Shadow DOM是实现组件封装的关键，它允许将组件的内部结构、样式和行为与外部DOM隔离，避免样式污染和DOM操作冲突。

Shadow DOM的核心概念

1. 封装性：Shadow DOM内的样式不会影响外部文档，外部样式也不会渗透到Shadow DOM内（除特定CSS变量和::part伪元素）。
2. DOM树隔离：Shadow DOM内部的节点对外部不可见，例如document.querySelector无法获取Shadow DOM内的元素。
3. 组成结构：
   • Shadow Host：挂载Shadow DOM的普通DOM元素（如<div>）。
   • Shadow Tree：Shadow Host内部的独立DOM子树。
   • Shadow Root：Shadow Tree的根节点，通过attachShadow()方法创建。

创建Shadow DOM的步骤

1. 选择Shadow Host：
   在普通DOM元素上创建Shadow Root：

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

   • mode: 'open'：允许通过hostElement.shadowRoot访问Shadow DOM。
   • mode: 'closed'：禁止外部访问Shadow Root（返回null）。

2. 向Shadow Tree添加内容：
   使用DOM操作或模板填充内容：

   shadowRoot.innerHTML = `
     <style>
       /* 仅作用于Shadow DOM内部的样式 */
       button { background: blue; }
     </style>
     <button>Shadow DOM中的按钮</button>
   `;
   

3. 使用模板优化：
   通过<template>标签预定义可复用的结构：

   <template id="my-template">
     <p>Shadow DOM内容</p>
   </template>
   

   const template = document.getElementById('my-template');
   shadowRoot.appendChild(template.content.cloneNode(true));
   

样式封装机制

• 内部样式不影响外部：Shadow DOM内的CSS选择器仅作用于组件内部。
• 外部样式默认不渗透：外部文档的CSS规则不会影响Shadow DOM，但以下例外：
  • 继承属性（如color、font）会从Host元素继承到Shadow Tree。
  • CSS变量（--var）可通过Host元素传递到内部：

    shadowRoot.innerHTML = `
      <style>button { color: var(--btn-color); }</style>
      <button>按钮</button>
    `;
    

  外部通过设置Host元素的变量值控制样式：

  #host { --btn-color: red; }
  

插槽（Slots）实现内容分发

1. 默认插槽：
   在Shadow DOM内使用<slot>标签定义内容插入点：

   shadowRoot.innerHTML = `
     <div>
       <slot></slot> <!-- 外部传入的内容将替换此标签 -->
     </div>
   `;
   

   外部使用时，Host元素的子内容会被插入到插槽位置：

   <div id="host">
     <p>这段文字会显示在Shadow DOM的slot位置</p>
   </div>
   

2. 命名插槽：
   使用name属性指定插槽与内容的对应关系：

   shadowRoot.innerHTML = `
     <div>
       <slot name="title"></slot>
       <slot name="content"></slot>
     </div>
   `;
   

   外部通过slot属性匹配内容：

   <div id="host">
     <h1 slot="title">标题</h1>
     <p slot="content">正文</p>
   </div>
   

事件处理与冒泡

• 事件重定向：Shadow DOM内触发的事件在外部监听时，会被重定向到Host元素。例如，点击Shadow DOM内的按钮后，外部监听Host元素的点击事件会触发。
• 关闭事件重定向：使用event.composedPath()可查看事件原始路径，调用event.stopPropagation()可阻止事件冒泡到外部。

完整示例：封装一个提示框组件

// 创建Shadow DOM结构
class Tooltip extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        .tooltip {
          position: relative;
          display: inline-block;
        }
        .tooltip-text {
          visibility: hidden;
          background: black;
          color: white;
          padding: 5px;
          position: absolute;
          top: 100%;
        }
      </style>
      <div class="tooltip">
        <slot name="text">默认提示</slot>
        <span class="tooltip-text">
          <slot name="hint"></slot>
        </span>
      </div>
    `;
  }
}

// 注册自定义元素
customElements.define('my-tooltip', Tooltip);

<!-- 使用组件 -->
<my-tooltip>
  <span slot="text">悬停查看提示</span>
  <span slot="hint">这是Shadow DOM内的提示内容</span>
</my-tooltip>

总结
Shadow DOM通过DOM和样式封装解决了组件隔离问题，结合插槽机制实现灵活的内容分发。在实际开发中，通常与Custom Elements配合使用，构建可复用的Web Components。注意浏览器兼容性（现代浏览器均支持），必要时使用Polyfill（如@webcomponents/webcomponentsjs）。