Shadow DOM是Web组件中实现样式与结构封装的核心技术，通过attachShadow方法为元素挂载独立的影子树，形成隔离的DOM作用域，确保内部样式和结构不被外部影响，同时支持slot机制实现内容分发，提供开放（open）和封闭（closed）两种模式以控制访问权限，其中open模式允许通过shadowRoot属性访问内部结构，而closed模式增强封装性但难以调试，配合: host等伪类可控制宿主样式，实现真正的“黑盒”组件，提升前端开发的模块化与复用能力。
Web组件是一套允许开发者创建可复用、独立且具有封装性的自定义HTML元素的技术。它由三项主要技术构成：自定义元素（Custom Elements）、影子DOM（Shadow DOM）和HTML模板（<template>）。其中，Shadow DOM 是实现样式与结构封装的核心机制，也是构建真正隔离组件的关键。
Shadow DOM 是什么？
Shadow DOM 提供了一种将隐藏的 DOM 树附加到某个元素的方式，这个“影子树”与主文档 DOM 隔离，拥有独立的作用域。这意味着在 Shadow Root 内部定义的样式和结构不会影响外部页面，同时外部的 CSS 和 JavaScript 也难以穿透进来。
这种封装能力让 Web 组件具备了真正的“黑盒”特性，非常适合构建跨项目、跨团队使用的 UI 组件库。
关键概念：- Shadow Host：被挂载 Shadow DOM 的元素。
- Shadow Root：Shadow DOM 的根节点。
- Shadow Boundary：影子边界，隔离内外 DOM 和样式的分界线。
如何创建一个 Shadow DOM？
使用 JavaScript 中的 attachShadow() 方法即可为任意元素挂载 Shadow DOM。
示例代码：
class MyCard extends HTMLElement {
constructor() {
super();
// 挂载 Shadow DOM
const shadow = this.attachShadow({ mode: 'open' });
// 创建内部结构
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<style>
div {
border: 1px solid #ccc;
padding: 16px;
font-family: sans-serif;
background: #f9f9f9;
}
h3 { color: #005a9c; }
</style>
<h3><slot name="title">默认标题</slot></h3>
<p><slot>默认内容</slot></p>
`;
// 将结构加入 Shadow Root
shadow.appendChild(wrapper);
}
}
// 定义自定义元素
customElements.define('my-card', MyCard);
之后就可以在 HTML 中使用：
<my-card> <span slot="title">这是自定义标题</span> <p>这是自定义段落内容</p> </my-card>
Shadow DOM 的封装性与插槽（Slot）机制
虽然 Shadow DOM 实现了强封装，但有时我们需要让外部内容“透传”进组件内部——这就用到了 <slot> 元素。
Slot 是 Web Components 的内容分发机制，允许开发者在 Shadow DOM 中预留位置，由使用者填充具体内容。
常见用法：- 匿名 Slot：不带 name 属性，接收所有未指定 slot 的子节点。
- 具名 Slot：通过 name 属性匹配外部内容。
- 默认内容：在 slot 标签内写内容，当无投递内容时显示。
例如：
<slot>这里是默认文本</slot>
若调用者没有提供内容，就会显示“这里是默认文本”。
封闭模式（Closed Mode）与开放模式（Open Mode）
调用 attachShadow 时可以设置 mode 为 'open' 或 'closed'。
- open：可通过 element.shadowRoot 访问 Shadow Root（默认推荐）。
- closed：无法通过 JS 外部访问 Shadow Root，增强封装性，但调试困难，实际较少使用。
注意：即使设为 closed，也不能完全防止高级手段（如重写原型方法）访问内部结构，因此不应依赖它做安全防护。
样式隔离与作用域优先级
Shadow DOM 最大的优势之一是样式隔离：
- 外部样式表不能直接影响 Shadow 内部元素（除非使用 :host 或全局选择器）。
- 内部样式不会泄露到外部。
- 可以通过 :host、:host()、:host-context() 控制宿主元素本身或其上下文样式。
示例：
:host {
display: block;
margin: 10px;
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}
这段样式控制的是自定义元素本身的显示状态，且只在 Shadow DOM 内生效。
基本上就这些。掌握 Shadow DOM 的工作机制，是深入理解现代 Web 组件开发的基础。它不仅提升了组件的可维护性和可复用性，也为构建大型前端系统提供了原生级别的模块化支持。
