Shadow DOM通过attachShadow()创建隔离的DOM树，实现样式与结构封装，支持open或closed模式，结合CSS变量和:host可实现主题定制与宿主样式控制。
Shadow DOM 是 Web Components 的核心之一，它能将一个隐藏的、独立的 DOM 树附加到某个元素上，实现结构和样式的封装。通过 Shadow DOM，你可以让组件内部的样式不会受到外部 CSS 影响，同时组件内部的样式也不会泄露到全局，从而实现真正的样式隔离。
创建 Shadow DOM 并启用样式封装
要使用 Shadow DOM，首先需要调用 attachShadow() 方法为一个元素挂载 shadow tree。该方法接收一个配置对象，其中 mode 字段决定封装级别：
- mode: 'open'：可以从外部 JavaScript 访问 shadow DOM
- mode: 'closed'：shadow DOM 完全封闭，无法从外部访问
示例代码：
class MyComponent extends HTMLElement {
constructor() {
super();
// 创建 shadow root
this.attachShadow({ mode: 'open' });
// 添加内部结构
this.shadowRoot.innerHTML = `
<style>
p {
color: blue;
font-family: sans-serif;
}
</style>
<p>这是封装的内容</p>
`;
}
}
// 注册自定义元素
customElements.define('my-component', MyComponent);
此时，页面中使用 <my-component></my-component> 时，其内部的 p 标签只会应用 shadow DOM 内部的样式，不受页面其他 CSS 影响。
立即学习“Java免费学习笔记（深入）”；
样式隔离的实际效果
Shadow DOM 的样式隔离体现在两个方面：
- 外部样式不穿透：即使页面中有全局规则如 p { color: red; }，也不会影响 shadow root 内部的 p 元素
- 内部样式不泄漏：shadow DOM 中定义的 .btn { ... } 不会作用到页面其他元素
这种机制非常适合构建可复用、不冲突的 UI 组件，比如按钮、模态框、输入框等。
通过 CSS 变量实现主题定制
虽然样式被隔离，但你仍可以通过 CSS 自定义属性（CSS Variables）暴露部分样式给外部控制，实现灵活的主题支持。
例如：
this.shadowRoot.innerHTML = `
<style>
p {
color: var(--my-text-color, blue);
}
</style>
<p>可被主题控制的文字</p>
`;
在外部页面中设置：
my-component {
--my-text-color: green;
}
这样既保持了封装性，又提供了定制能力。
使用 :host 控制宿主元素样式
在 shadow DOM 内部，可以使用 :host 伪类选择器来设置宿主元素本身的样式。
<style>
:host {
display: block;
border: 1px solid #ccc;
padding: 10px;
background: #f9f9f9;
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}
</style>
这样可以让组件根据外部属性动态调整外观，同时保持样式逻辑在组件内部。
基本上就这些。Shadow DOM 提供了强大的样式封装能力，配合自定义元素和模板，是构建现代前端组件的理想选择。关键是理解它的作用范围和通信方式，合理使用变量和:host即可兼顾隔离与灵活性。
