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}
然后在 HTML 中使用：
姓名：张三
年龄：25
这里用了
Shadow DOM 封装的核心优势与原理
其封装能力来源于以下几个设计原理：
- 样式隔离：Shadow Root 内的 只作用于内部元素，不会泄漏出去
- DOM 隔离：内部节点不在主 DOM 树中，querySelector 默认查不到
- 事件穿透：多数事件会自动跨过 Shadow 边界冒泡到主 DOM，但可以通过 event.composed 控制是否穿透
-
插槽机制：
支持灵活的内容投影，提升组件灵活性
这些特性共同构成了 Web Components 的三大支柱之一（另两个是 Custom Elements 和 HTML Templates），让原生浏览器支持组件化开发成为可能。
基本上就这些。掌握 Shadow DOM 的使用，就能写出真正隔离、可复用的前端组件，无需依赖框架也能实现高质量封装。
