在 shadowroot 中无效，因浏览器不触发 fetch 或解析；@import 会阻塞渲染且 ssr/hmr 不兼容；应使用 cssstylesheet + adoptedstylesheets 方案，并为 safari 手动降级。
为什么 <link rel="stylesheet"> 在 shadowRoot 里完全没反应
不是路径写错了，也不是网络问题——<link> 在 shadowRoot 中只是普通 DOM 节点，浏览器压根不会触发 fetch 或解析样式。规范明确要求隔离，所以它不会生效，也不报错。常见现象包括：link.sheet 始终为 null，DevTools 里能看到节点但 computed styles 为空，样式表根本没进 CSSOM。
为什么 @import 在 <style></style> 里要慎用
@import 语法上合法，但执行时同步阻塞渲染：浏览器必须等外部 CSS 下载、解析完，才能继续画后续内容。实测首屏延迟 300–600ms。更麻烦的是：
- SSR 场景下完全不执行（无网络上下文）
- HMR 热更新后，
@import块常被丢弃，样式瞬间消失 - 路径基于当前 HTML 文档 URL 解析，不是组件 JS 所在位置，极易 404
- 返回 404/500 时，整个
<style></style>块被静默忽略，控制台零提示 - Webpack/Vite 等工具无法识别该引用，不能哈希、压缩或做依赖分析
正确做法：用 CSSStyleSheet + adoptedStyleSheets 三步走
这是目前唯一符合 Web Components 设计哲学的现代方案：样式实例直接挂载，不插入 DOM，支持变量继承、动态替换，且不触发重排。必须严格按顺序执行：
- 用
new CSSStyleSheet()创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 调用
replaceSync()同步注入 CSS 文本（初始化推荐）；若需异步加载，用replace()并await - 赋值给
shadowRoot.adoptedStyleSheets = [sheet]（注意是只写数组，不是 setter）
常见错误：
- 跳过
replaceSync()或replace()，直接赋空实例 → 样式不生效 - 误写成
shadowRoot.styleSheets = [sheet]→ 静默失败或抛TypeError - 试图把
document.querySelector('link').sheet直接赋过去 → 它是只读未激活实例，浏览器拒绝 adopt
Safari 兼容性兜底必须手写，不能省略
截至 2026 年 9 月，Safari 17.4 之前版本对 adoptedStyleSheets 的支持仍不稳定，replaceSync() 在 Safari 15–17.3 中可能抛错。必须显式检测并降级：
if ('adoptedStyleSheets' in ShadowRoot.prototype) {
shadowRoot.adoptedStyleSheets = [sheet];
} else {
const style = document.createElement('style');
style.textContent = cssText;
shadowRoot.appendChild(style);
}
别指望构建工具自动 fallback，这个判断必须手写；也别用 innerHTML 拼接 <style></style>，那样生成的是文本节点，不进 CSSOM，后续改 textContent 完全无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
