adoptedStyleSheets 是 Web Components 中唯一现代可控的外部 CSS 引入方式，需严格按 new CSSStyleSheet() → replaceSync() → 赋值三步执行；link.sheet 不可直接赋值因只读且未激活，fetch 或 CSS 模块导入后也须经 replaceSync() 才能生效。
adoptedStyleSheets 是目前 Web Components 中引入外部 CSS 的唯一现代、可控、可复用的标准方式，但它不是“拿来即用”的语法糖——必须走 new CSSStyleSheet() → replaceSync() → 赋值给 shadowRoot.adoptedStyleSheets 三步流程，缺一不可。
为什么 document.querySelector('link').sheet 不能直接赋值
很多人尝试 shadowRoot.adoptedStyleSheets = [document.querySelector('link[href="base.css"]').sheet]，结果样式完全不生效，控制台也无报错。这是因为：link.sheet 返回的是一个只读、未激活的 CSSStyleSheet 实例，浏览器会静默忽略它；adoptedStyleSheets 只接受通过 new CSSStyleSheet() 构造并显式注入规则的“可 adopt”实例。
- 即使该
<link>已加载完成，.sheet属性仍不具备 adopt 条件 - 试图对它调用
replaceSync()会抛TypeError: Cannot assign to read only property - 这种写法在 Chrome/Firefox/Safari 全部失效，不是兼容性问题，而是语义错误
正确创建并注入 CSSStyleSheet 的三步实操
必须严格按顺序执行：构造 → 注入规则 → 赋值。推荐使用 replaceSync()（同步阻塞），避免异步时机导致 FOUC 或样式丢失。
- 用
new CSSStyleSheet()创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 立即调用
sheet.replaceSync(cssText)写入完整 CSS 字符串（注意：不是insertRule，后者只支持单条规则） - 最后赋值给
shadowRoot.adoptedStyleSheets = [sheet]—— 这是只写数组，不能 push，不能拼接旧值
示例：
立即学习“前端免费学习笔记（深入）”；
const sheet = new CSSStyleSheet();
sheet.replaceSync(`:host { display: block; } .button { color: var(--primary); }`);
const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];
如何加载外部 CSS 文件（如 theme.css）
不能直接 fetch 后塞进 adoptedStyleSheets，必须先转成 CSSStyleSheet 实例。常见错误是漏掉 replaceSync() 或用错对象类型。
- fetch +
replaceSync()是最通用方案：fetch('theme.css').then(r => r.text()).then(css => { const s = new CSSStyleSheet(); s.replaceSync(css); shadow.adoptedStyleSheets = [s]; }) - 若构建工具支持（Vite / Webpack 5+ / Node.js 20.10+），可用 CSS 模块导入：
import themeCSS from './theme.css' assert { type: 'css' };，然后直接shadow.adoptedStyleSheets = [themeCSS] - 切勿写成
shadow.adoptedStyleSheets = [fetch(...).then(...)]—— 数组里不能放 Promise
多个样式表与生命周期管理的易忽略点
你可以一次性传入数组：shadow.adoptedStyleSheets = [sheet1, sheet2, bootstrapSheet]，但要注意两个深层问题：
- 同一
CSSStyleSheet实例可被多个shadowRoot复用，但若组件频繁挂载/卸载，旧sheet不会自动销毁，可能造成内存泄漏 -
:host规则必须写在注入的 CSS 字符串中（如sheet.replaceSync(':host { ... }')），不能靠innerHTML += '<style>:host{...}'</style>—— 后者不走 Shadow DOM 样式封装机制 - Safari ≤17.3 仍不支持
CSSStyleSheet构造函数，降级时需 fallback 到shadowRoot.innerHTML = '<style>...</style>'，但会失去变量继承和复用能力
真正难的不是“怎么写”，而是“什么时候清理”——尤其在动态主题或微前端场景下，sheet 实例的持有与释放必须由你显式控制。
