唯一可靠方式是cssstylesheet+adoptedstylesheets三步全走：创建sheet、注入csstext、赋值adoptedstylesheets；link和@import在shadowroot中被浏览器无视，因link不触发fetch、@import阻塞渲染且ssr/hmr静默失败。
直接结论：不能用 <link rel="stylesheet">，也不能在 <style></style> 里写 @import；唯一可靠路径是 CSSStyleSheet + adoptedStyleSheets，且必须三步全走完。
为什么 <link> 和 @import 在 shadowRoot 里完全失效
不是路径错、不是网络问题，是浏览器根本无视它们：<link> 在 shadow DOM 中只是普通节点，不触发 fetch；@import 则在 <style></style> 解析时同步阻塞，实测首屏延迟 300–600ms，且 SSR/HMR 下直接静默失败——控制台无报错，link.sheet 始终为 null，DevTools 里能看到节点但 computed styles 为空。
常见错误包括：
- 用
document.createElement('link')然后shadowRoot.appendChild()—— 无效 - 在
shadowRoot.innerHTML = '<style>@import "./a.css"</style>'—— 卡住渲染且构建工具无法识别依赖 - 指望 Webpack/Vite 自动提取或哈希这类引用 —— 它们不在依赖图里
正确用 adoptedStyleSheets 的三步不可跳过
必须严格按顺序执行，缺一不可：
-
const sheet = new CSSStyleSheet()—— 创建空实例（Chrome 73+、Firefox 94+、Safari 15.4+ 支持） -
sheet.replaceSync(cssText)或await sheet.replace(cssText)—— 同步注入（推荐初始化）或异步加载（大文件用） -
shadowRoot.adoptedStyleSheets = [sheet]—— 注意是只写数组赋值，不是 setter；写成shadowRoot.styleSheets = [sheet]会静默失败或抛TypeError
别试图复用 document.querySelector('link').sheet —— 它是只读未激活实例，挂载后样式不生效。
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 或用 innerHTML = '<style>...</style>' —— 那生成的是文本节点，不进 CSSOM，后续改 textContent 完全无效。
:host 和 ::slotted() 是唯一合法“穿墙”方式
Shadow DOM 样式失效不是权重不够，是外部规则根本进不了它的 CSSOM。想让宿主或投影内容受控，只能靠这两个伪类：
-
:host只匹配组件自身标签（如<my-card></my-card>），不能写:host div.title去选子元素；支持状态和属性选择器，如:host([disabled])、:host-context(.theme-dark) -
::slotted(p)只作用于被<slot></slot>投影进来的 light DOM 直接子节点，且仅支持可继承属性（color、font-family、background-color等）；不能设display、margin、width
复杂点在于：一旦你用了 adoptedStyleSheets，就彻底放弃了全局样式穿透的幻想；而 :host 和 ::slotted() 的语义限制极强，稍一越界，样式就“消失”——这不是 bug，是封装边界的刚性体现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
