真正能稳定生效的只有 cssstylesheet + adoptedstylesheets 路径，且必须严格完成三步：new cssstylesheet() 创建、replacesync() 注入、赋值给 shadowroot.adoptedstylesheets 数组。
不能用 <link rel="stylesheet">，也不能靠 @import 拼字符串，真正能稳定生效的只有 CSSStyleSheet + adoptedStyleSheets 这一条路径——但必须严格走完三步，缺一不可。
为什么 <link> 在 shadowRoot 里完全不生效
<link> 标签在 shadow DOM 中只是普通节点，浏览器根本不会触发 fetch 或解析样式。这不是 bug，是 Shadow DOM 规范强制隔离的结果。
- 控制台无报错，
link.sheet始终为null - 即使你
shadowRoot.appendChild(linkEl)，样式也绝不会应用 - Webpack/Vite 等构建工具无法识别这种引用，无法哈希、压缩或做依赖分析
- SSR 场景下完全失效（服务端没有网络上下文）
为什么 @import 在 <style></style> 里要慎用
@import 在语法上合法，但执行时同步阻塞渲染，首屏延迟明显，且 SSR/HMR 场景下极易翻车。
- 实测加载延迟 300–600ms，用户可感知卡顿
- HMR 热更新后，
@import块常被丢弃，样式瞬间丢失 - CSS 返回 404/500 时，整个
<style></style>块被浏览器静默忽略，无任何提示 - 路径基于当前 HTML 文档 URL 解析，不是组件 JS 所在位置，极易 404
正确使用 CSSStyleSheet + adoptedStyleSheets
这是目前唯一符合 Web Components 设计哲学的方案：样式实例直接挂载，不插入 DOM，支持变量继承、动态替换，且不触发重排。
- 必须用
new CSSStyleSheet()创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 必须调用
replaceSync()（初始化推荐）或replace()（异步加载）注入 CSS 文本 - 必须赋值给
shadowRoot.adoptedStyleSheets（注意是只写数组，不是 setter） - 不能把
document.querySelector('link').sheet直接赋过去——它只是未激活的只读实例，浏览器拒绝 adopt
示例：
const sheet = new CSSStyleSheet();
sheet.replaceSync(`:host { display: block; color: var(--text-primary, #333); }`);
const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];
Safari 兼容性兜底必须显式写
截至 2026 年 6 月，Safari 17.4 之前版本对 adoptedStyleSheets 支持仍不稳定，降级逻辑不能省略。
- 检测
'adoptedStyleSheets' in ShadowRoot.prototype，不支持时回退到document.createElement('style')+textContent注入 - 不要指望自动 fallback，必须手动判断并分支处理
- 多个 shadow root 共享同一
CSSStyleSheet实例时，注意移除组件后该 sheet 不会自动从其他 root 中剔除
最易被忽略的点：replaceSync() 必须在赋值前调用；adoptedStyleSheets 是数组，不是 setter，写成 shadowRoot.styleSheets = [sheet] 会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
