插入shadowroot会逃逸至全局，因html解析器不识别shadow boundary，必须代理href、重写路径并用adoptedstylesheets注入cssstylesheet。
Shadow DOM里为什么样式逃逸到全局
直接把 <link rel="stylesheet" href="style.css"> 插入 shadowRoot，浏览器会把它加到 document.head，而不是作用于当前 shadow tree。结果就是样式污染全局，且无法被 :host 或 ::slotted 限制作用域。
根本原因是：HTML 解析器不识别 shadow boundary，<link> 标签在插入时被当作普通文档资源处理。
- 必须拦截并重写请求：主应用需代理所有
href，返回带 scope 属性的 CSS 文本（如将url(./icon.svg)替换为绝对路径或 base64 内联） - 构造
CSSStyleSheet实例后，用adoptedStyleSheets注入：shadowRoot.adoptedStyleSheets = [sheet] - Safari 16.4+ 和 Chrome 73+ 才稳定支持
adoptedStyleSheets；旧版需 fallback 到shadowRoot.appendChild(styleEl)，但要确保styleEl是从DOMParser提取的，而非字符串拼接 - @import 规则不会自动解析，必须提前展开或替换为等效 CSS 文本
Shadow DOM中相对路径（如 url(./img.png)）为什么404
Shadow DOM 不改写 CSS 中的相对路径解析上下文——它仍以当前 HTML 文档的 base URL 为准，不是以 shadow root 所在位置为准。所以 url(./img.png) 会从主页面 URL 解析，而非组件所在目录。
这不是 bug，是规范行为。浏览器压根没给 shadow tree 设定独立的“base path”。
- 预处理阶段必须做路径重写：用正则或 CSS AST 工具把所有
url(./xxx)替换为绝对路径、data URL 或内联 base64 - 避免使用
../：它依赖文件系统层级，在构建产物中极易断裂；统一用包内固定路径（如/assets/icons/check.svg）更可控 - 若资源由服务端动态提供，应在响应头中设置
Content-Location或返回完整 URL，避免客户端解析歧义
Shadow DOM里<script>执行后找不到内部元素</script>
常见错误是把含 <script></script> 的 HTML 字符串直接赋给 shadowRoot.innerHTML。这时脚本在全局 window 下执行，document.querySelector('.btn') 查的是主文档，不是 shadow 内部。
更隐蔽的问题是：即使脚本里写了 this.shadowRoot?.querySelector，this 也指向 window，不是宿主元素。
- 不要用
innerHTML注入含<script></script>的字符串；用DOMParser解析后，手动创建script元素并appendChild到shadowRoot - 执行前需绑定上下文：比如第三方库初始化时传入
shadowRoot作为查找起点 ——new Quill(shadowRoot.querySelector('.ql-editor')) - 若必须动态执行脚本内容，用
Function构造器并显式绑定this、window、document到当前 shadow 环境（注意 CSP 可能拦截eval-like 行为） -
<script src="..."></script>仍会加载，但执行环境仍是全局；如需隔离，必须 fetch 后手动eval并重绑定
adoptedStyleSheets 为何对 CSS 变量继承链失效
adoptedStyleSheets 能注入样式表，但它不改变 CSS 变量的作用域链。变量值只从宿主元素及其祖先上继承，不会从 shadow root 自身向上查找 —— 即使你把 style 挂在 shadowRoot 上，var(--primary) 仍要去宿主元素找定义。
这导致一个典型问题：你在 shadowRoot 里写 style { :root { --primary: blue; } }，但内部按钮依然读不到这个变量。
- 变量定义必须落在宿主元素或其祖先上，例如：
<my-button style="--primary: #3b82f6;"></my-button>或<div class="theme-dark"><my-button><li>shadow 内部只能消费变量，不能声明影响外部的变量；想透传主题，靠 <code>:host(.dark) { --text-color: white; }把变量“反射”回宿主作用域 - 避免在 shadow 内部用
@media (prefers-color-scheme: dark)直接设变量 —— 它不触发宿主更新，应由外部监听并主动设置属性
真正麻烦的不是怎么注入资源，而是资源背后的上下文假设全被打破了：路径、变量、执行环境、甚至 CSS 解析顺序，都得重新锚定到 shadow boundary 上。稍有疏忽，就变成“看起来渲染了，但点不动、颜色不对、图片 404、脚本静默失败”。
