只有new CSSStyleSheet()创建的实例才能被多个Shadow Root共享；需用replaceSync()或insertRule()注入规则，且所有已adopt的Shadow Root会实时响应样式变更。
怎么创建一个能被多个 Shadow Root 共享的 CSSStyleSheet 实例
只有 new CSSStyleSheet() 创建的对象才能被多个 Shadow Root 同时 adopt；从 <style>、<link> 或 document.styleSheets 取出的 sheet 都不行——浏览器会静默忽略，不报错也不生效。
必须立即注入规则，否则是空表：sheet.replaceSync('.btn { padding: 4px 8px; }') 是最安全的初始化方式。不要试图读 sheet.cssRules 再改写，它在规则注入完成前长度恒为 0，且只读。
- 若已有 CSS 字符串（比如通过
import css from './button.css' assert { type: "css" }加载），可直接赋值：shadow.adoptedStyleSheets = [css] - 旧版构建工具不支持
assert { type: "css" }？用fetch('button.css').then(r => r.text()).then(text => sheet.replaceSync(text))替代 - 别用
sheet.cssText = '...'—— 它不可写，会直接报错
怎么把同一份样式表挂到多个 Shadow Root 上
靠对象引用共享，不是复制或克隆。只要所有 Shadow Root 都已通过 el.attachShadow({ mode: "open" }) 创建好，就可以直接复用同一个 sheet 实例：
shadow1.adoptedStyleSheets = [sheet];shadow2.adoptedStyleSheets = [sheet];shadow3.adoptedStyleSheets = [sheet];
后续调用 sheet.replaceSync() 或 sheet.insertRule()，所有已 adopt 的 Shadow Root 会实时同步更新。但注意：一旦启用 adoptedStyleSheets，该 Shadow Root 内的 <style> 标签就彻底失效，哪怕它还在 DOM 里。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 多个组件共用一份样式？建议提前创建并缓存
sheet，避免重复构造 - 不要在不同 Shadow Root 间混用
adoptedStyleSheets和内联<style>，行为不可预测 - 如果某个 Shadow Root 没调
adoptedStyleSheets，它不会“继承”其他 root 的样式，作用域完全独立
为什么 insertRule() 报错或没效果
常见于三种情况：sheet 还没注入任何规则、插入位置越界、传入了非法多行 CSS 字符串。
insertRule() 只接受单条规则字符串，例如 'button:hover { opacity: 0.8; }'，不能带 @media、不能含换行、不能是多条规则拼接。
- 安全追加方式：
sheet.insertRule(rule, sheet.cssRules.length) - 如果之前用过
replaceSync()，再调insertRule()是允许的；但如果sheet.cssRules.length === 0，插到索引 0 会失败 - 主题切换等整块替换场景，优先用
replaceSync()重写全部规则，比反复insertRule()更可靠
adoptedStyleSheets 的兼容性与边界限制
Chrome 73+、Firefox 94+、Safari 15.4+ 支持，IE 和旧 Safari 完全不支持。这不是渐进增强能绕开的问题，而是底层 API 缺失。
它不支持 @media 或 @supports 动态重算，也不能响应 viewport 变化自动切换规则；所有规则都是静态注入的。更关键的是：一旦用了 adoptedStyleSheets，就不能再指望 <style> 标签生效，连 innerHTML = '<style>...</style>' 都会被忽略。
- 需要动态媒体查询？得靠 JS 监听
matchMedia，然后手动调replaceSync()切换整套规则 - 想让
::slotted()或:host也走 adopted 流程？可以，但它们只是普通 CSS 规则，写进replaceSync()就行，无需特殊处理 - 第三方 UI 库（如 Bootstrap）的 CSS 文件不能直接 adopt，必须先提取、转义、内联资源路径，否则
url(...)会 404
