在web组件中通过 adoptedstylesheets 共享css，核心做法是在父级或宿主元素上定义一个全局的 cssstylesheet 实例，并将其赋值给子组件的 adoptedstylesheets 数组。这样做的结果是子组件内部的 shadow dom 将继承该样式表中的规则，实现样式的跨边界复用。需要注意的是，如果子组件自身也定义了样式，浏览器会按照数组顺序合并处理，且全局样式通常具有较低的优先级，除非使用 :host 选择器或提高特异性。
如何创建并注入全局样式表
要共享样式，首先需要创建一个空的 CSSStyleSheet 对象，或者从现有的样式表中克隆。然后，将这个实例添加到目标元素的 adoptedStyleSheets 属性中。这个操作是动态的，意味着你可以在运行时修改样式表的内容，所有引用了该实例的元素都会实时更新。这种方法比传统的 标签更灵活，因为它允许 JavaScript 直接操作 CSSOM。
// 1. 创建全局样式表
const globalSheet = new CSSStyleSheet();
// 2. 添加样式规则
globalSheet.replaceSync(`
.shared-class {
color: blue;
font-size: 16px;
}
`);
// 3. 在组件连接时应用
class MyComponent extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = '<div class="shared-class">Hello</div>';
// 4. 将全局样式表 adopt 到 Shadow DOM
shadow.adoptedStyleSheets = [globalSheet];
}
}
上述代码展示了完整的流程：首先实例化 CSSStyleSheet，使用 replaceSync 注入 CSS 文本，然后在组件的 connectedCallback 中将包含该实例的数组赋给 Shadow Root 的 adoptedStyleSheets。运行后，Shadow DOM 内的 .shared-class 将应用蓝色文字和指定字号。这种方式避免了在每个组件中重复编写相同的 CSS，实现了真正的样式共享。
如何处理样式冲突与优先级
当全局样式与组件内部样式同时存在时，优先级取决于 adoptedStyleSheets 数组的顺序以及 CSS 选择器的特异性。通常情况下，Shadow DOM 内部的 标签定义的样式优先级高于 adoptedStyleSheets 中的样式。如果希望全局样式覆盖内部样式，可以通过提高全局样式的选择器特异性，或者将全局样式表放在 adoptedStyleSheets 数组的末尾（尽管这通常不足以覆盖内部样式，除非内部样式使用了 !important）。更推荐的做法是利用 :host 选择器来针对组件本身进行样式控制，从而避免与内部内容的样式冲突。
// 全局样式表 - 低优先级
const sheet1 = new CSSStyleSheet();
sheet1.replaceSync('.box { color: red; }');
// 组件内部样式 - 高优先级
const internalStyle = document.createElement('style');
internalStyle.textContent = '.box { color: blue; }';
shadow.appendChild(internalStyle);
// 结果：文字为蓝色，因为内部 <style> 优先级更高
// 若要强制红色，需提高全局样式特异性或使用 :host
sheet1.replaceSync(':host(.force-red) .box { color: red !important; }');
shadow.adoptedStyleSheets = [sheet1];
</style>
在实际开发中，建议明确区分“组件内部样式”和“主题/全局样式”。内部样式用于保证组件的封装性，而全局样式用于统一品牌风格。如果必须通过 adoptedStyleSheets 覆盖内部样式，应谨慎使用 !important 或提高选择器层级。例如，使用 :host-context() 或 ::part 伪元素可以更优雅地暴露组件内部节点供外部样式定制，而不是强行覆盖。上述代码演示了当两者冲突时，内部 优先生效，只有通过 :host 结合 !important 才能改变这一行为，这体现了 Shadow DOM 的封装原则。
动态修改共享样式表的实时效果
由于 CSSStyleSheet 是一个可变的对象，对其内容的修改会立即反映在所有 adopted 它的 Shadow DOM 中。这意味着你可以创建一个中央状态管理库，根据用户交互（如切换深色模式）动态更新 replaceSync 的内容。这种响应式特性使得 adoptedStyleSheets 成为实现主题切换的理想方案。无需重新渲染组件或重新附加 Shadow DOM，只需更新样式表对象即可。
const themeSheet = new CSSStyleSheet();
function setTheme(isDark) {
const colors = isDark ? { bg: '#000', text: '#fff' } : { bg: '#fff', text: '#000' };
themeSheet.replaceSync(`
:host {
background: ${colors.bg};
color: ${colors.text};
}
`);
}
// 初始化
setTheme(false);
// 用户点击按钮后
setTheme(true); // 所有使用该 themeSheet 的组件瞬间变暗
这段代码展示了一个简单的主题切换逻辑。定义一个全局的 themeSheet，并通过 setTheme 函数动态调用 replaceSync 更新 CSS 变量或直接替换规则。当调用 setTheme(true) 时，所有已经 adopted 了 themeSheet 的组件会立即应用新的背景色和文字颜色。这种机制不仅性能高效，而且解耦了样式逻辑与组件逻辑，使得样式管理更加集中和可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
