HTML5 Shadow DOM 封装UI组件样式的核心是结构、样式和行为完全隔离：1. 用attachShadow({mode:'closed'})创建封闭shadow root；2. 样式必须内联标签注入；3. 利用:host等伪类控制继承与上下文响应；4. 提取baseStyles复用公共样式。
使用 HTML5 的 Shadow DOM 封装 UI 组件样式，核心是让每个组件的结构、样式和行为完全隔离，不被外部 CSS 影响，也不影响外部页面。关键在于正确创建 shadow root、注入样式（推荐 <style></style> 内联）、避免全局污染，并合理处理样式继承与自定义。
1. 创建 Shadow Root 并启用封装
在自定义元素中调用 attachShadow({ mode: 'closed' }) 或 'open' 模式。推荐用 'closed' 防止外部 JS 意外访问内部结构，增强封装性：
class MyButton extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'closed' });
shadow.innerHTML = `
<button class="btn"><slot></slot></button>
<style>
.btn {
padding: 8px 16px;
border: 1px solid #007bff;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background: #0056b3;
}
</style>
`;
}
}
customElements.define('my-button', MyButton);
2. 样式必须内联到 Shadow Root 中
Shadow DOM 的样式不会从外部继承（除非显式设置），也不能被外部 CSS 选中（如 my-button .btn 无效）。因此所有样式需通过 <style></style> 标签写入 shadow root 内部：
- 不要依赖外部
<link rel="stylesheet">—— 它在 shadow 中不生效（除非用adoptedStyleSheets，但兼容性和维护成本高） - 可动态插入
<style></style>，适合主题切换或运行时样式生成 - 支持 CSS 自定义属性（
--my-color），可用于暴露主题接口
3. 控制样式继承与穿透（谨慎使用）
默认情况下，shadow host 的字体、颜色等基础属性会“透入”到 shadow 内部（via inherited properties），但布局类属性（如 margin、display）不会。如需进一步控制：
立即学习“前端免费学习笔记（深入）”；
- 用
:host选择器给宿主元素设样式（如:host { display: inline-block; }） - 用
:host-context(...)响应外部环境（如暗色模式下:host-context(.dark) {...}） - 避免
::slotted()过度样式化插槽内容——它只作用于直接子节点，且无法穿透多层嵌套
4. 构建可复用的样式基座（推荐）
为保持一致性，可提取公共样式片段，在每个组件 shadow 中重复注入（或用模板字符串函数复用）：
const baseStyles = `
:host { display: inline-block; }
*, *::before, *::after { box-sizing: border-box; }
button, input, select { font: inherit; }
`;
class MyInput extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'closed' });
shadow.innerHTML = `
<input type="text" class="input" />
<style>${baseStyles}
.input {
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
`;
}
}
