Shadow DOM 是 Web Components 的核心技术，通过 attachShadow() 方法将隔离的 DOM 树挂载到宿主元素上，实现样式和结构的封装，防止全局样式污染与 DOM 冲突。其支持 open 和 closed 两种模式，分别允许或限制外部访问影子根；内部样式默认不泄露，可通过 :host、::slotted 和 CSS 变量等方式与外界通信，结合 Custom Elements 和 HTML Templates 构建高内聚、可复用的 UI 组件。
Shadow DOM 是 Web Components 的核心技术之一，它提供了一种将封装的 DOM 树附加到页面元素上的方式，同时隔离其内部结构、样式和脚本。在使用 JavaScript 创建 Shadow DOM 时，可以实现真正的组件级封装，避免全局样式污染和 DOM 冲突。
什么是 Shadow DOM
Shadow DOM 允许开发者创建一个与主文档 DOM 隔离的“影子”DOM 树。这个影子树挂载在一个宿主元素（host）上，其内部的 HTML 和 CSS 不会受到外部样式影响，外部也无法直接访问其内部节点。
这种隔离性使得组件更加健壮和可复用，特别适合构建高内聚、低耦合的 UI 组件。
如何创建 Shadow DOM
通过 JavaScript 的 attachShadow() 方法可以为任意元素挂载 Shadow DOM。该方法接收一个配置对象，其中 mode 字段决定封闭性：
立即学习“Java免费学习笔记（深入）”；
- open：允许通过 JavaScript 从外部访问 Shadow Root
- closed：完全封闭，无法从外部访问内部结构
// 创建一个自定义元素并挂载 Shadow DOM
class MyComponent extends HTMLElement {
constructor() {
super();
// 挂载 Shadow DOM
this.shadow = this.attachShadow({ mode: 'open' });
// 添加内部结构
this.shadow.innerHTML = `
<style>
p { color: blue; font-family: sans-serif; }
</style>
<p>这是 Shadow DOM 中的内容</p>
`;
}
}
// 注册自定义元素
customElements.define('my-component', MyComponent);
上面代码定义了一个名为 my-component 的自定义元素，其内容被封装在 Shadow DOM 中，样式不会泄漏到外部，也不会被外部样式覆盖。
样式与作用域隔离
Shadow DOM 最大的优势之一是样式隔离。在 Shadow Root 内部定义的 CSS 只作用于该组件内部，即使选择器是全局的（如 body、div），也仅限于当前影子树。
例如，在 Shadow DOM 中写 p { color: red }，不会影响页面其他地方的 p 标签。
如果需要从外部影响 Shadow DOM 的样式，可以通过以下方式：
- 使用 CSS 自定义属性（CSS Variables）传递主题色等配置
- 在 Shadow Root 中预留插槽（slot）供外部传入内容
- 通过 :host、:host-context 等伪类控制宿主元素样式
this.shadow.innerHTML = `
<style>
:host {
display: block;
border: 1px solid #ccc;
padding: 8px;
}
:host([hidden]) {
display: none;
}
::slotted(span) {
font-weight: bold;
}
</style>
<slot></slot>
`;
上面示例中，:host 控制组件自身外观，::slotted() 定义投影内容的样式。
封闭模式（Closed Mode）与安全封装
设置 mode: 'closed' 可以让 Shadow Root 无法被外部访问：
this.shadow = this.attachShadow({ mode: 'closed' });
此时，element.shadowRoot 返回 null，外部 JavaScript 无法操作影子内部结构，增强了封装性和安全性。
但要注意：浏览器开发者工具仍可能查看结构，且这不是严格的安全沙箱，不应依赖它防止恶意操作。
基本上就这些。Shadow DOM 结合 Custom Elements 和 HTML Templates，构成了现代 Web 组件的基础，让前端开发更模块化、更可维护。合理使用 open 或 closed 模式，能有效控制组件的封装程度与灵活性。不复杂但容易忽略的是样式边界和 slot 的使用，掌握好这些细节才能写出真正独立的组件。
