adoptedStyleSheets 不能直接赋值给 shadowRoot.styleSheets，因为后者是只读快照；必须通过可写的 adoptedStyleSheets 数组传入 CSSStyleSheet 实例，且需调用 replaceSync() 注入样式。
adoptedStyleSheets 为什么不能直接赋值给 shadowRoot.styleSheets
因为 shadowRoot.styleSheets 是只读的，它只是反映当前生效的样式表快照，不是可操作的集合。试图写入会静默失败或报错（如 TypeError: Cannot assign to read only property 'styleSheets'）。真正生效的路径只有 shadowRoot.adoptedStyleSheets——它是可写的数组，且只接受 CSSStyleSheet 实例。
常见错误是用 document.createElement('style') 插入后以为自动生效，其实它只影响 light DOM；或者用 shadowRoot.innerHTML = '，生成的是文本节点，不触发样式解析。
- 必须用
new CSSStyleSheet()创建实例，再调用.replaceSync()注入 CSS 文本 - 也可以用
document.adoptedStyleSheets中已存在的 sheet，但要注意跨 shadow root 共享时的样式泄漏风险 - 动态更新时，直接修改
adoptedStyleSheets数组即可，无需重新 attach 或 replace 整个 shadow root
如何安全地复用同一份 CSSStyleSheet 实例
多个 shadow root 共享一个 CSSStyleSheet 是高效做法，但要注意：一旦某个 shadow root 被移除，该 sheet 不会自动从其他 root 中剔除；而如果 sheet 内部使用了 :host 或 ::slotted，它在不同上下文里仍能正确解析——这是设计使然，不是 bug。
典型场景是组件库统一主题：把主题样式提前定义为全局 const themeSheet = new CSSStyleSheet()，然后在每个组件的 constructor 或 connectedCallback 里执行 shadowRoot.adoptedStyleSheets = [themeSheet, localSheet]。
- 不要在每次渲染都新建
CSSStyleSheet，否则内存泄漏+性能下降 - 若需按需加载样式，用
fetch().then(r => r.text()).then(css => sheet.replaceSync(css))，注意replaceSync是同步阻塞的，大样式建议用replace()（返回 Promise） - IE 和旧版 Safari 不支持
adoptedStyleSheets，需降级到shadowRoot.appendChild(styleEl)并手动管理生命周期
adoptedStyleSheets 在 Lit / Stencil 等框架中的实际写法差异
Lit 默认用 css 模板标签 + static styles，底层就是靠 adoptedStyleSheets；Stencil 则默认走 shadow: true + 内联 ，需显式启用 scoped: true 或手动接管样式注入。
如果你绕过框架封装自己操作，Lit 的 renderRoot 是 shadow root，可直接赋值：this.renderRoot.adoptedStyleSheets = [mySheet]；而 Stencil 的 this.el.shadowRoot 同理，但要注意 componentDidLoad 钩子才确保 shadowRoot 存在。
- Lit 的
unsafeCSS或css标签输出的是CSSResult，不是原生CSSStyleSheet，不能直接塞进adoptedStyleSheets - 想混用框架样式和自定义 sheet？Lit 支持数组拼接：
static styles = [baseStyles, ...customSheets]，其中customSheets必须是CSSStyleSheet实例 - Vue 3 的
defineCustomElement默认不启用 shadow DOM 样式隔离，得手动调用attachShadow并设置adoptedStyleSheets
调试 adoptedStyleSheets 生效与否的三个关键检查点
样式没生效？别急着改 CSS，先确认这三处：
- 浏览器是否支持：Chrome 73+、Firefox 96+、Safari 16.4+；用
'adoptedStyleSheets' in ShadowRoot.prototype判断 -
shadowRoot.adoptedStyleSheets是否真的被赋值——在 DevTools Console 里打印它，看是不是空数组或undefined - CSS 选择器是否被 shadow boundary 阻断：比如你在 light DOM 写了
my-button { color: red }，对 shadow 内部元素无效；必须用:host或通过part属性暴露槽点
最容易被忽略的是：CSSStyleSheet 实例创建后，如果不调用 .replaceSync() 或 .replace()，它就是空的——控制台看不出异常，但样式完全不会渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
