应避免在 shadow dom 中使用 @import 引入 css，因其阻塞渲染、导致 ssr/hmr 失效、路径易 404、构建工具无法处理；推荐采用 adoptedstylesheets + cssstylesheet.replacesync() 方案，safari 17.4+ 基本可用，旧版本需降级为 fetch + 守卫式 innerhtml 注入。
别用 @import 在 Shadow DOM 里引入外部 CSS，它会阻塞渲染、SSR 失效、HMR 丢失样式、路径易 404，且构建工具完全无法处理。
为什么 @import 在 shadowRoot.innerHTML 中会卡住首屏
@import 是 CSS 规范定义的同步阻塞行为：浏览器必须等目标 CSS 文件下载、解析完成，才能继续处理后续样式或 DOM 渲染。实测延迟普遍在 300–600ms，对自定义元素首屏影响极明显。
- 它不走 HTML 预加载队列，而是在
<style></style>解析阶段才发起请求，Network 面板里显示为 “late” - 路径基于当前 HTML 文档 URL 解析，不是组件 JS 所在位置——
@import './style.css'很可能 404 - 返回 404/500 时，整个
<style></style>块被浏览器静默丢弃，控制台无任何错误提示 - Webpack/Vite 等构建工具完全无法识别该引用，不能哈希、压缩、Tree Shaking 或做依赖分析
adoptedStyleSheets 是唯一现代可行方案，但 Safari 支持有硬伤
真正可控的方式是 JS 构造 CSSStyleSheet 实例，调用 replaceSync() 注入规则，再赋值给 shadowRoot.adoptedStyleSheets。这不是语法糖，而是三步缺一不可的流程：
- 用
new CSSStyleSheet()创建空样式表（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 必须调用
replaceSync()（推荐初始化时）或replace()（需 await），否则实例无效 - 直接赋值
shadowRoot.adoptedStyleSheets = [sheet]，注意它是只写数组属性，不是 setter - 切勿尝试
shadowRoot.adoptedStyleSheets = [document.querySelector('link').sheet]——link.sheet是只读未激活实例，挂载后样式不生效
Safari 是最大现实障碍：15–17.3 版本存在 replaceSync() 抛错、insertRule() 失效、CSS 变量动态更新不刷新等问题；17.4+ 才基本可用，但仍弱于 Chrome/Firefox。
降级必须显式判断，fetch + innerHTML 要防重复注入
当 'adoptedStyleSheets' in shadowRoot 为 false 时，需主动降级。最常用的是 fetch('./style.css') 后拼进 shadowRoot.innerHTML，但它本质是字符串注入，没有作用域管理能力：
- 务必加守卫：用
shadowRoot.querySelector('style[data-id="my-comp"]')判断是否已存在，避免列表渲染多个实例时重复插入 10 个相同<style></style> -
fetch失败不能静默吞掉，要 fallback 到内联默认样式或抛出Error - 相对路径（如
./style.css）仍以 HTML 文档 URL 为基准，建议用绝对路径或构建时转为完整 URL -
<link rel="stylesheet">在 Shadow DOM 中完全无效，不要尝试
真正难的不是选哪种方式，而是把兼容性判断、重复注入防护、失败 fallback、路径解析逻辑全写进一个 connectedCallback 里——稍不注意，开发环境看着好好的组件，上线后在 Safari 17.2 或旧版 Firefox 就白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
