adoptedStyleSheets 是唯一推荐的生产级方案，@import 和 在 shadowRoot 中因规范限制完全无效；必须按顺序创建 CSSStyleSheet、replaceSync() 注入、赋值 adoptedStyleSheets；Safari 需手写兼容逻辑，共享 sheet 安全且高效。
adoptedStyleSheets 是唯一推荐的生产级方案，@import 和 <link> 在 shadowRoot 里完全无效——不是路径错、不是网络问题，是浏览器规范层面的忽略或阻塞。
为什么 @import 在 <style></style> 里会卡住首屏
@import 是 CSS 规范定义的同步阻塞行为：浏览器必须等目标文件下载并解析完，才能继续渲染。实测首屏延迟普遍在 300–600ms；它不走 HTML 预加载队列，Network 面板里显示为 “late” 请求；路径基于当前 HTML 文档 URL 解析，不是组件 JS 所在位置，@import './style.css' 极易 404；返回 404/500 时整个 <style></style> 块被静默丢弃，控制台无任何错误；Webpack/Vite 等构建工具完全无法识别该引用，不能哈希、压缩或 Tree Shaking。
为什么 <link rel="stylesheet"> 在 shadowRoot 里根本没用
<link> 在 shadowRoot 中只是普通 DOM 节点，不会触发 fetch，也不会进入 CSSOM。这是 Shadow DOM 规范明确规定的隔离行为，不是 bug。常见现象包括：link.sheet 始终为 null，DevTools 里能看到节点但 computed styles 为空，元素始终无样式。不要尝试 shadowRoot.appendChild(document.createElement('link'))，也不要指望 SSR 或构建工具能提取这类引用——它们根本不在依赖图里。
正确使用 CSSStyleSheet + adoptedStyleSheets 的三步不可跳过
必须严格按顺序执行以下三步，缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 用
new CSSStyleSheet()创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 调用
replaceSync()同步注入 CSS 文本（初始化推荐），或replace()异步加载（需await）；只new不replace，样式不会生效 - 赋值给
shadowRoot.adoptedStyleSheets = [sheet]（注意是只写数组属性，不是 setter；写成shadowRoot.styleSheets = [sheet]会静默失败或抛TypeError）
别试图复用 document.querySelector('link').sheet——它是只读未激活实例，挂载后样式不生效。
Safari 兼容性兜底必须手写，不能靠构建工具
截至 2026 年 11 月，Safari 17.3 及更早版本对 adoptedStyleSheets 支持仍不稳定，replaceSync() 可能直接抛错。必须显式检测：
if ('adoptedStyleSheets' in ShadowRoot.prototype) {
shadowRoot.adoptedStyleSheets = [sheet];
} else {
const style = document.createElement('style');
style.textContent = cssText;
shadowRoot.appendChild(style);
}
不要用 innerHTML 拼接 <style></style>，那样生成的是文本节点，不进 CSSOM，后续改 textContent 完全无效。也别指望框架或构建工具自动 fallback——这个判断必须手写，且要放在每个实际注入逻辑中。
真正容易被忽略的点是：多个 shadow root 共享一个 CSSStyleSheet 实例是高效做法，但一旦某个 root 被移除，该 sheet 不会自动从其他 root 中剔除；而 :host 和 ::slotted 在共享 sheet 中依然能正确解析上下文——这不是 bug，是设计使然，但开发者常误以为“样式泄漏”而反复新建实例，导致内存泄漏。
