<link>在shadow DOM中无效是因规范强制隔离，仅作普通节点；@import会阻塞渲染且SSR/HMR不兼容；现代方案是CSSStyleSheet+adoptedStyleSheets，但需Safari 17.4+，旧版须降级处理。
不能用 <link>，@import 会阻塞渲染，真正可用且现代的方案是 CSSStyleSheet + adoptedStyleSheets；但 Safari 17.4 之前版本不稳，必须写降级逻辑。
为什么 <link rel="stylesheet"> 在 shadowRoot 里完全无效
<link> 标签在 shadow DOM 中只是普通节点，不会触发 fetch 或样式解析。即使你 shadowRoot.appendChild(linkEl)，浏览器也无视它——这是 Shadow DOM 规范明确规定的隔离行为，不是 bug。
常见错误现象包括：控制台无报错、元素始终无样式、开发者工具里能看到 <link> 节点但 link.sheet 为 null。
不要尝试用 document.createElement('link') 然后设 href 再 append；也不要指望 SSR 或构建工具能自动提取这类引用——它们根本不在依赖图里。
立即学习“前端免费学习笔记（深入）”；
为什么 @import 在 shadowRoot.innerHTML 中要慎用
@import 在 <style> 块内语法合法，但执行时同步阻塞：浏览器必须等 CSS 文件下载并解析完，才能继续渲染后续内容。实测延迟 300–600ms，首屏体验明显卡顿。
典型翻车点：
- 服务端渲染（SSR）中
@import完全不生效（无网络上下文） - HMR 热更新后，
@import块常被丢弃，样式瞬间丢失 - 路径基于当前 HTML 文档 URL 解析，不是组件 JS 所在位置，极易 404
- CSS 返回 404/500 时，整个
<style>块被浏览器静默忽略，无任何提示 - Webpack/Vite 等工具无法识别该引用，不能哈希、压缩或做依赖分析
正确使用 CSSStyleSheet + adoptedStyleSheets
这是目前唯一符合 Web Components 设计哲学的方案：样式实例直接挂载，不插入 DOM，支持变量继承、动态替换，且不触发重排。
必须严格按三步执行：
- 用
new CSSStyleSheet()创建空样式表（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 调用
replaceSync()同步注入 CSS 文本（初始化推荐）；若需异步加载，用replace()并await - 将该实例赋值给
shadowRoot.adoptedStyleSheets（注意是只写数组，不是 setter）
常见错误：
- 试图把
document.querySelector('link').sheet直接赋给adoptedStyleSheets——link.sheet是只读未激活实例，浏览器拒绝 adopt - 跳过
replaceSync()或replace()，直接赋空CSSStyleSheet实例 —— 样式不会生效 - 误写成
shadowRoot.styleSheets = [sheet]——styleSheets是只读快照，赋值静默失败或抛TypeError
兼容性兜底必须显式写，不能靠“应该能用”
adoptedStyleSheets 在 Safari 17.4+ 才稳定支持；15–17.3 存在 replaceSync() 抛错、insertRule() 失效等问题；Firefox 旧版甚至不识别该属性。
降级逻辑不能省：
- 先检查
'adoptedStyleSheets' in shadowRoot，否则旧版直接白屏 - 兜底方案推荐
fetch('./style.css').then(text => { ... })+innerHTML注入，但务必加守卫：shadowRoot.querySelector('style[data-id="my-comp"]')防重复 -
fetch失败时不能静默吞掉，至少插入基础默认样式或console.error - 避免在
constructor中发请求——此时shadowRoot可能还没创建；应放在connectedCallback或首次渲染逻辑中
最易被忽略的一点：多个组件共用同一份 CSSStyleSheet 实例时，一旦某个 shadowRoot 被移除，该 sheet 不会自动从其他 root 中剔除——你得自己管理生命周期，否则内存泄漏风险真实存在。
