Shadow DOM中无效因样式隔离机制阻断外部CSS注入；唯一合法通道是adoptedStyleSheets，需用CSSStyleSheet对象加载后显式挂载。
Shadow DOM里直接用为什么无效
因为 Shadow DOM 的样式隔离机制默认会阻止外部 标签的 CSS 进入 shadow root —— 浏览器根本不会去 fetch 和应用它，哪怕路径正确、网络可达。这不是 bug，是设计使然：shadow boundary 天然阻断样式层的冒泡和注入。
常见错误现象： 放在 shadowRoot.innerHTML 里，控制台无报错但样式完全不生效；或开发者工具里能看到 link 节点，但 computed styles 里查不到对应规则。
- 不能依赖 HTML 解析阶段自动加载（
在 shadow 内被忽略） - 不能靠
@import在 shadow 内部 CSS 中引用外部文件（同样被隔离策略拦截） - 动态创建
并 append 到 shadowRoot 也无效 —— 它只是个节点，不会触发 fetch
constructable-stylesheets 是什么，为什么它能绕过限制
CSSStyleSheet 构造函数（即 constructable stylesheet）允许 JS 直接创建一个可复用、可共享的样式表对象，并通过 shadowRoot.adoptedStyleSheets 显式挂载。它不经过 HTML parser，也不依赖 link 标签生命周期，因此完全避开 shadow boundary 的拦截逻辑。
关键点在于：adoptedStyleSheets 是唯一被浏览器认可的、合法向 shadow root 注入外部样式的通道。
- 必须用
new CSSStyleSheet()创建（不是document.styleSheets[0]那种只读副本） - 样式内容需用
replace()或replaceSync()加载（支持 Promise 或同步字符串） - 一个 stylesheet 可被多个 shadowRoot 共享，避免重复解析和内存浪费
- Chrome 73+、Edge 79+、Safari 15.4+、Firefox 96+ 支持；旧版本需回退到
字符串注入
如何安全地加载并应用远程 CSS 文件
直接 fetch CSS 文本再调用 replace() 是最常用方式，但要注意 MIME 类型、CORS、错误处理 —— 这些都比 隐式加载更显式、也更可控。
const sheet = new CSSStyleSheet();
try {
const res = await fetch('/assets/base.css');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const cssText = await res.text();
await sheet.replace(cssText); // 异步，返回 Promise
shadowRoot.adoptedStyleSheets = [sheet];
} catch (err) {
console.warn('Failed to load stylesheet:', err);
// 回退方案：插入 <style> 标签（仅用于降级）
const style = document.createElement('style');
style.textContent = 'body { opacity: 0.9; }';
shadowRoot.appendChild(style);
}</style>
-
replace()是异步的，适合带网络延迟的场景；replaceSync()仅接受字符串，不可用于 fetch 结果 - 务必检查
res.ok，否则 404 会静默失败，replace()报错但不中断流程 - 如果 CSS 文件含相对路径资源（如
url(./img.png)），这些路径仍以当前文档 base URL 解析，不是 shadow root 所在位置
多个样式表合并与动态切换的注意事项
adoptedStyleSheets 接收数组，但它是「全量替换」语义：每次赋值都会丢弃之前所有已 adopt 的 sheet，所以不能用 .push() 增量添加。
- 想叠加多个样式表？必须维护一个数组变量，每次更新时重新赋值完整列表：
shadowRoot.adoptedStyleSheets = [baseSheet, themeSheet, overrideSheet] - 动态切换主题时，别反复创建新
CSSStyleSheet实例 —— 应该复用已加载好的 sheet 对象，只换顺序或增删引用 - 注意内存：未被任何
adoptedStyleSheets引用的CSSStyleSheet实例会被 GC，但若在全局缓存中长期持有，需自行管理生命周期 - 服务端渲染（SSR）环境无法使用 constructable stylesheet（无
CSSStyleSheet构造函数），必须走内联或客户端 hydration 补充
真正容易被忽略的是：adoptedStyleSheets 不会响应式更新。改了数组内容，必须重新赋值整个数组才能生效；而且它只影响当前 shadow root，父组件或 light DOM 完全感知不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
