adoptedStyleSheets 如何在多个 Shadow DOM 共享样式：构造、挂载与更新边界

组件库里有四个 Web Component 都需要同一套按钮样式时，最容易出现的做法是每个 ShadowRoot 都塞一份 。它能工作，却让规则重复、主题更新要改多处。更稳的方案是先用 CSSStyleSheet() 构造一份样式表，再把同一个对象交给多个 ShadowRoot 的 adoptedStyleSheets。

共享的不是 CSS 文本，而是同一个 CSSStyleSheet 对象；先构造并填充，再挂载到各个 ShadowRoot，后续用 replaceSync 或 insertRule 更新时，所有采用它的组件都会看到同一份变化。

组件样式重复，问题通常不在 Shadow DOM 隔离

Shadow DOM 的边界本来就是好事：页面外部的选择器不会随意钻进组件内部，组件自己的规则也不会污染页面。麻烦在于，组件库如果为 user-card、order-card 和 notice-card 分别创建相同的 ，主题色、焦点态和间距就会出现多个维护入口。

adoptedStyleSheets 解决的是“同一份构造样式表被多个 DOM 树采用”，不是取消 Shadow DOM 的隔离。共享后，规则仍按各自的 ShadowRoot 作用域计算。

先构造 CSSStyleSheet，再挂载到多个 ShadowRoot

最小实现可以把公共样式集中在一个模块中。这里保留三个稳定节点：CSSStyleSheet() 创建对象，replaceSync() 写入规则，adoptedStyleSheets 把它挂到两个 ShadowRoot。

const sharedSheet = new CSSStyleSheet();
sharedSheet.replaceSync(`
  :host { display: block; font: 14px/1.5 system-ui; }
  button { color: #164e63; border: 1px solid #67e8f9; }
`);

const firstRoot = document.querySelector('#first').attachShadow({ mode: 'open' });
const secondRoot = document.querySelector('#second').attachShadow({ mode: 'open' });

firstRoot.adoptedStyleSheets = [sharedSheet];
secondRoot.adoptedStyleSheets = [sharedSheet];

验收时不要只看页面“像是有样式”：检查两个 ShadowRoot 内的按钮是否同时出现青色边框，并确认 firstRoot.adoptedStyleSheets[0] === secondRoot.adoptedStyleSheets[0] 为 true。这证明两个组件采用的是同一个 sheet，而不是恰好内容相同的两份副本。

更新共享对象时，所有采用者都会一起变化

构造样式表的价值在主题切换时更明显。组件初始化完成后，仍然持有 sharedSheet，更新它就能让两个 ShadowRoot 一起刷新。对简单主题，replaceSync() 直接替换整份规则；对增量规则，可以使用 insertRule()。

function applyDenseTheme() {
  sharedSheet.replaceSync(`
    :host { display: block; font: 13px/1.35 system-ui; }
    button { color: #f8fafc; background: #0f172a; }
  `);
}

applyDenseTheme();
console.log(firstRoot.adoptedStyleSheets[0] === sharedSheet); // true
console.log(secondRoot.adoptedStyleSheets[0] === sharedSheet); // true

可见成功状态是两个组件同时切换到深色按钮，而不是只更新调用函数所在的组件。这里别急着把每次状态变化都改成字符串拼接；规则量较大时，应把主题文本集中管理，并在更新后检查 cssRules 数量和关键选择器。

三个边界决定它能不能稳定上线

MDN 对这一接口的约束很明确：可采用的样式表需要由 CSSStyleSheet() 创建，并且与 ShadowRoot 属于同一个父 Document。跨 iframe 或不同文档传递对象时，不能把“对象可访问”误认为“可以采用”。

旧浏览器或测试环境怎么做降级

生产代码可以把共享样式文本保留为常量，在能力检测失败时，为每个 ShadowRoot 创建自己的 。降级方案牺牲了共享对象的更新传播，但保持组件能渲染；测试时还要覆盖“能力存在但赋值失败”的异常路径。

function mountStyles(root, cssText) {
  if ('adoptedStyleSheets' in root && 'replaceSync' in CSSStyleSheet.prototype) {
    root.adoptedStyleSheets = [sharedSheet];
    return 'adopted';
  }

  const style = document.createElement('style');
  style.textContent = cssText;
  root.append(style);
  return 'inline-style';
}

回归检查至少包括：支持路径返回 adopted，两个 ShadowRoot 的按钮同时可见；降级路径返回 inline-style，组件仍有边框和焦点样式；跨文档用例不应静默吞掉异常。

常见问题

adoptedStyleSheets 会让 Shadow DOM 失去隔离吗？

不会。共享的是样式表对象，规则仍在各自的 Document 或 ShadowRoot 作用域内计算。

为什么不能直接采用 link 标签加载的样式表？

adoptedStyleSheets 面向 CSSStyleSheet() 构造的样式表。外部 link 得到的样式表不是这个构造路径，不能按同样方式直接采用。

replaceSync 和 replace 应该怎么选？

主题规则已经在内存中、希望同步完成时可用 replaceSync；需要异步处理时再考虑 replace，并为更新完成后的渲染状态写测试。

迁移清单

• 把重复的 ShadowRoot 样式收敛为一个 CSSStyleSheet() 对象。
• 使用 replaceSync() 初始化，并把同一对象挂到每个目标 ShadowRoot。
• 验证共享引用、主题更新和跨文档边界。
• 为不支持环境保留 style 文本降级，并检查最终可见状态。