在shadow dom中不推荐，因其每次attachshadow都会重复发起http请求、无法缓存复用、导致fouc，且不能跨实例共享cssom；而cssstylesheet+adoptedstylesheets支持同步注入、多根复用、动态主题切换，chrome 73+/firefox 117+/safari 17.4+原生支持。
因为直接在 Shadow DOM 里用 <link rel="stylesheet"> 或内联 <style></style> 会触发网络请求、阻塞渲染、无法复用，而 CSSStyleSheet 实例 + adoptedStyleSheets 是唯一能跨组件共享、零闪屏、可编程更新的原生方案。
为什么 <link> 在 Shadow DOM 中不推荐？
它看似简单，实则埋了三个坑：
- 每次 attachShadow 都发起一次 HTTP 请求（即使同个 CSS URL），无缓存复用
- 加载是异步的，
replaceSync或主题切换时会出现样式空白或闪烁 - 无法在多个组件实例间共享同一个样式表对象——每个组件都持有一份独立解析后的 CSSOM，内存占用翻倍
CSSStyleSheet 怎么解决复用和热替换问题？
关键在于：它是 JS 对象，不是 HTML 标签。你可以提前构造、缓存、复用、动态修改。
- 用
new CSSStyleSheet()创建一次，replaceSync()同步注入 CSS 文本，避免 FOUC - 把同一个
sheet实例赋给多个 Shadow Root 的adoptedStyleSheets数组，真正“一份样式、多处生效” - 主题切换只需改一个变量：
shadowRoot.adoptedStyleSheets = [DARK_THEME]，毫秒级生效，无需重新 fetch
哪些浏览器支持？要不要 polyfill？
截至 2026 年中，主流浏览器均已稳定支持：
- Chrome 73+、Edge 79+、Firefox 117+ —— 全量支持
adoptedStyleSheets和CSSStyleSheet - Safari 17.4+（2024 年 3 月起）—— 已移除实验标记，可放心使用
- 不需要 polyfill；若需兼容 Safari 17.3 及更早版本，可用
shadowRoot.innerHTML += '<style>...</style>'降级，但会失去复用能力
真正容易被忽略的是：constructable stylesheets 不是“让外部 CSS 能用”，而是“让外部 CSS 可控”。你必须自己管理 sheet 生命周期（比如组件销毁时从 adoptedStyleSheets 移除），否则旧 sheet 仍驻留内存，尤其在频繁挂载/卸载的场景下会累积泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
