在shadowRoot中不生效，因浏览器不解析其CSS；@import会阻塞首屏渲染且构建工具无法处理；应使用CSSStyleSheet+replaceSync+adoptedStyleSheets三步法，并为Safari手动降级。
为什么 <link rel="stylesheet"> 在 shadowRoot 里完全不生效
不是路径错了，也不是网络超时——浏览器压根不解析 shadowRoot 里的 <link>。它被当成了普通 DOM 节点，既不触发 fetch，也不进 CSSOM。控制台无报错，link.sheet 始终为 null，DevTools 里能看到节点但 computed styles 为空，就是典型表现。
为什么 @import 在 <style></style> 中会拖慢首屏
@import 是同步阻塞行为：浏览器必须等 CSS 文件下载、解析完，才能继续渲染。实测首屏延迟 300–600ms；它不走 HTML 预加载队列，路径还基于当前文档 URL 解析（不是组件 JS 所在目录），容易 404；构建工具如 Vite/webpack 完全无法识别，没法哈希、Tree Shaking 或做错误提示。
必须用 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 不 replaceSync，sheet 就是空壳；误用 document.querySelector('link').sheet，拿到的是只读未激活实例，挂载后照样无效。
Safari 兼容性兜底必须手写，不能依赖构建工具
截至 2026 年 10 月，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，这个判断必须出现在你的组件代码里。
真正难的不是写对这三步，而是记住：样式进不了 CSSOM，就等于没存在过；而 Safari 的兼容性判断，必须出现在每个用到 adoptedStyleSheets 的地方，漏一处就可能白屏或样式丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
