Shadow DOM引入外部CSS方法解析

Shadow DOM 的样式隔离机制天然阻断外部 CSS 的自动注入，导致常见的 `` 标签、`@import` 甚至动态插入的 `

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+ 支持；旧版本需回退到