Shadow DOM 是一种用于创建独立、封装 DOM 树的技术，通过 attachShadow 方法将影子 DOM 附加到元素上，实现样式和结构的隔离。其核心特性包括：样式作用域限制在 Shadow Root 内部，外部 CSS 难以影响内部结构；主文档的 DOM 查询无法直接访问影子节点；结合 Custom Elements 可构建高内聚组件；使用 实现内容分发，提升组件灵活性。模式分为 open 和 closed，分别控制外部是否可访问 Shadow Root。作为 Web Components 的关键组成部分，Shadow DOM 支持原生组件化开发，确保可复用性和封装性。

Shadow DOM 是 HTML5 提供的一种将封装的、独立的 DOM 树附加到元素上的技术，常用于构建可复用的 Web Components。它让开发者能隔离样式和结构，避免全局污染，实现真正的组件化开发。

什么是 Shadow DOM

Shadow DOM 允许在常规 DOM 之外创建一个“影子”DOM 树，这个树与主文档 DOM 隔离，拥有独立的作用域。这意味着：

• Shadow DOM 内部的 CSS 不会影响外部页面
• 外部的 CSS 也不会轻易影响 Shadow DOM 内容（除非使用特殊选择器）
• DOM 查询如 document.querySelector() 默认无法进入 Shadow Root

这种封装机制非常适合构建高内聚、低耦合的 UI 组件。

如何创建 Shadow DOM

通过调用元素的 attachShadow() 方法来开启 Shadow DOM：

const host = document.createElement('my-component');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  
  
这是 Shadow DOM 中的内容
`;
document.body.appendChild(host);

关键点：

• mode: 'open' 表示可以从外部通过 JavaScript 访问 Shadow Root
• mode: 'closed' 则完全封闭，无法通过 element.shadowRoot 获取
• 只有支持 Shadow DOM 的元素才能调用 attachShadow()，通常为自定义元素或普通 HTMLElement

结合 Custom Elements 实现组件封装

最典型的用法是配合自定义元素（Custom Elements）来封装完整组件：

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    const title = this.getAttribute('title') || '默认标题';

    this.shadowRoot.innerHTML = `
      
      
        
${title}
        
      
    `;
  }
}

customElements.define('my-card', MyCard);

然后在 HTML 中使用：

  
姓名：张三
  
年龄：25

这里用了 ，它是 Shadow DOM 的内容分发机制，允许外部传入的内容插入到指定位置。

Shadow DOM 封装的核心优势与原理

其封装能力来源于以下几个设计原理：

• 样式隔离：Shadow Root 内的 只作用于内部元素，不会泄漏出去
• DOM 隔离：内部节点不在主 DOM 树中，querySelector 默认查不到
• 事件穿透：多数事件会自动跨过 Shadow 边界冒泡到主 DOM，但可以通过 event.composed 控制是否穿透
• 插槽机制： 支持灵活的内容投影，提升组件灵活性

这些特性共同构成了 Web Components 的三大支柱之一（另两个是 Custom Elements 和 HTML Templates），让原生浏览器支持组件化开发成为可能。

基本上就这些。掌握 Shadow DOM 的使用，就能写出真正隔离、可复用的前端组件，无需依赖框架也能实现高质量封装。