不能直接在Shadow DOM中用<link rel="stylesheet">，因其每次attachShadow都会重复发起HTTP请求、无法缓存复用、导致FOUC，且各Shadow Root解析出独立CSSOM，无法共享；而CSSStyleSheet+adoptedStyleSheets支持同步注入、多根复用、动态主题切换。
为什么不能直接在 Shadow DOM 里用 <link rel="stylesheet">
因为每次调用 attachShadow()，浏览器都会重新发起一次 HTTP 请求，即使 URL 完全相同；样式加载异步，容易导致 FOUC（Flash of Unstyled Content）；更重要的是，每个 Shadow Root 都会解析出独立的 CSSOM，无法共享、无法复用、内存占用翻倍。这不是“写法错”，而是底层机制决定它不适合组件化场景。
CSSStyleSheet 实例怎么创建和注入
核心是两步：构造一个可编程的样式表对象，再同步挂载到 Shadow Root。关键不在于“能不能加载”，而在于“谁来控制加载时机和生命周期”。
- 用
new CSSStyleSheet()创建空实例，它是纯 JS 对象，不触发网络请求 - 用
fetch()获取 CSS 文本后，调用sheet.replace(cssText)（注意：这是异步方法，返回 Promise） - 成功后赋值给
shadowRoot.adoptedStyleSheets = [sheet]，这是同步生效的唯一方式 - 若需支持主题切换，只需替换数组内容，比如
shadowRoot.adoptedStyleSheets = [DARK_THEME]
浏览器兼容性与降级处理的实际判断
Chrome 73+、Firefox 117+、Edge 79+ 和 Safari 17.4+ 均已原生支持 adoptedStyleSheets 和 CSSStyleSheet，无需 polyfill。Safari 17.3 及更早版本不支持 replace()，但可降级为 sheet.replaceSync(cssText)（仅同步文本，无 Promise）；若连 CSSStyleSheet 构造都不支持，才需 fallback 到 shadowRoot.innerHTML += '<style>...</style>' —— 但这会丢失复用能力，仅作保底。
最容易被忽略的内存泄漏点
constructable stylesheets 不是“用了就完事”，你得自己管理它的生命周期。组件卸载时，如果没从 adoptedStyleSheets 数组中移除该 sheet 实例，它仍驻留在内存中。尤其在频繁挂载/卸载的列表项或弹窗组件里，旧 sheet 会持续累积。正确做法是在 disconnectedCallback 或 unmount 阶段执行 shadowRoot.adoptedStyleSheets = [] 或过滤掉对应 sheet —— 这不是可选项，是必须项。
立即学习“前端免费学习笔记（深入）”；
