直接用 shadow dom 构建插件沙箱需协同设计结构、加载、样式、边界四方面：创建 open 模式的宿主容器挂载影子树，异步加载资源并注入 shadowroot，剥离全局副作用样式，通过 :host/::slotted 和 composed 事件实现可控跨边界通信。
直接用 Shadow DOM 构建插件沙箱，核心是两件事：把样式关进独立影子树，再让插件内容按需加载不阻塞主流程。它不是加个 attachShadow 就完事，得从结构、加载、样式、边界四方面协同设计。
一、创建带隔离边界的宿主容器
选一个轻量、语义清晰的元素作为 Shadow Host，比如 <plugin-container id="pay-plugin"></plugin-container>。它不渲染内容，只承担挂载职责：
- 在元素初始化时调用
attachShadow({ mode: 'open' })，仅一次，避免重复调用报错 - 设置
mode: 'open'便于调试和 DevTools 检查；不用closed，它会切断调试链路且防不住有心人 - 宿主本身不写样式，或只设基础 display / overflow，所有视觉表现交由 Shadow Tree 内部控制
二、实现异步加载并注入 Shadow Root
插件资源（HTML 片段、CSS、JS）应通过动态请求获取，而非硬编码在页面中。加载完成后，内容必须全部注入 shadowRoot，不能漏到主文档：
- 用
fetch()或import()获取插件包，支持 JSON/HTML/ESM 多种格式 - 拿到 HTML 字符串后，用
DOMParser解析，再遍历所有<style></style>和<link rel="stylesheet">，转为<style></style>标签并 append 到 shadowRoot - 脚本需用
eval（谨慎）或document.createElement('script')并显式设置script.setAttribute('type', 'module')，然后 append 到 shadowRoot —— 这样执行环境天然受限于 shadow scope - 避免使用
innerHTML = htmlString直接赋值，否则内联style或事件绑定可能逃逸；推荐用shadowRoot.appendChild(fragment)精确控制
三、确保样式真正“不泄漏、不透入”
Shadow DOM 提供默认隔离，但仍有几处容易破防：
- 外部 CSS 无法穿透影响内部，但
:host和::slotted是可控出口 —— 主应用可通过plugin-container { --theme-color: blue; }传变量，插件内部用:host { color: var(--theme-color); }接收 - 插件自身若定义
@font-face、@keyframes或:root变量，仍会全局注册 —— 解决办法是在加载前用正则剥离或重写，例如将@keyframes slide改为@keyframes pay-plugin-slide - 为防继承污染，可在 shadowRoot 根节点（如
<div class="root">）上设置 <code>all: initial，再显式声明需要继承的属性，如font-family、line-height四、处理跨边界交互与事件流
插件运行在 Shadow Tree 中，但常需与主应用通信。不能依赖全局事件或 document 查询：
- 插件内部 DOM 操作一律用
this.shadowRoot.querySelector，禁用document.querySelector - 向外通信走自定义事件：
this.dispatchEvent(new CustomEvent('plugin-ready', { detail: { version: '1.2.0' }, composed: true }))，composed: true允许冒泡出 Shadow Boundary - 主应用监听时，用
event.composedPath()[0]获取原始触发源（兼容性需检查），或约定统一通过宿主元素派发 - 避免在插件中修改
document.documentElement或设置全局 CSS 变量，这类操作仍会穿透隔离层
- 插件内部 DOM 操作一律用
