在shadowroot中不生效，因浏览器不解析其样式；必须用cssstylesheet+adoptedstylesheets三步：创建实例、replacesync注入、赋值adoptedstylesheets数组。
为什么 <link rel="stylesheet"> 在 shadowRoot 里完全不生效
不是路径错了，也不是网络问题——浏览器压根不解析 shadowRoot 内的 <link> 标签，它被当成了普通 DOM 节点。你能在 DevTools 里看到节点，但 link.sheet 始终是 null，computed styles 为空，控制台也无报错。同理，@import 会同步阻塞渲染，实测首屏延迟 300–600ms，SSR/HMR 场景下直接失效。
必须用 CSSStyleSheet + adoptedStyleSheets 三步走
这是目前唯一稳定、可维护、支持动态更新的方案，但必须严格执行以下三步，缺一不可：
-
new CSSStyleSheet()创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 调用
sheet.replaceSync(cssText)同步注入样式文本（初始化推荐），或await sheet.replace(cssText)异步加载（适合大文件） - 赋值给
shadowRoot.adoptedStyleSheets = [sheet]（注意：是数组，不是 setter；写成shadowRoot.styleSheets = [...]会静默失败或抛TypeError）
常见错误：只 new CSSStyleSheet() 不调 replaceSync()，样式不会应用；误用 document.querySelector('link').sheet，那只是未激活的只读实例，浏览器拒绝 adopt。
Safari 兼容性兜底必须手写判断
截至 2026 年 7 月，Safari 17.3 及更早版本对 adoptedStyleSheets 支持不稳定，replaceSync() 可能抛错。不能依赖构建工具自动 fallback，必须显式检测：
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 完全无效。
mode 必须设为 "open"，且注入时机要卡准
attachShadow({ mode: 'closed' }) 下，shadowRoot 返回 null，注入静默失败。DevTools 里看到 #shadow-root (open) 才算正确。
注入动作本身最容易被忽略：必须在 shadowRoot 创建后、元素首次渲染前执行，比如 connectedCallback 或 Lit 的 firstUpdated。重复执行会导致样式叠加、权重异常，建议加 data-tailwind-injected 这类标记做幂等判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
