Shadow DOM中和@import完全不生效，因浏览器不解析shadowRoot内的且@import阻塞渲染；唯一稳定方案是CSSStyleSheet配合adoptedStyleSheets三步执行，并需Safari兼容性兜底。
为什么和@import在shadowRoot里完全不生效
不是你写错了路径，也不是网络问题—— 在 shadowRoot 里根本不会触发 fetch，浏览器把它当普通 DOM 节点处理；@import 则会在解析 时同步阻塞渲染，实测首屏延迟 300–600ms，且 SSR/HMR 场景下直接失效。控制台无报错、link.sheet 始终为 null、DevTools 里能看到节点但 computed styles 为空，都是典型表现。
adoptedStyleSheets 的三步必须全部执行
真正能稳定生效的只有 CSSStyleSheet + adoptedStyleSheets 这一条路径，但必须严格走完三步：
-
new CSSStyleSheet()创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） - 调用
replaceSync()同步注入 CSS 文本（初始化推荐），或replace()异步加载（需await） - 赋值给
shadowRoot.adoptedStyleSheets = [sheet]（注意是只写数组，不是 setter）
跳过任意一步都会失败：比如只 new CSSStyleSheet() 不调 replaceSync()，样式不会应用；误写成 shadowRoot.styleSheets = [sheet] 会静默失败或抛 TypeError；更不能直接用 document.querySelector('link').sheet，它只是未激活的只读实例，浏览器拒绝 adopt。
Safari 兼容性兜底不能省略
截至 2026 年 7 月，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 拼接 ，那样生成的是文本节点，不进 CSSOM，后续动态改 textContent 完全无效。
:host 和 ::slotted 是唯一合法“穿墙”方式
Shadow DOM 样式失效不是权重不够，是根本“看不见”外部规则。想让宿主元素的 CSS 变量或类名影响内部，只能靠：
-
:host匹配组件自身标签，例如:host { color: var(--text-primary, #333); }，可继承变量但不能选子元素 -
::slotted()控制投影内容，仅支持可继承属性（color、font等），不能设display或margin
别写 ::slotted(*) —— 不可靠，也违背 slot 设计本意；:host-context() 已废弃，:host([dark]) 才是安全的属性匹配方式。所有跨边界逻辑都依赖这两个伪类，其余全是单向封闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
