Shadow DOM 不是运行环境而是隔离容器，直接 innerHTML = htmlString 会致 script 全局执行、style 污染自身、link 绕过边界、onxxx 属性引发 XSS；必须用 DOMParser 解析后手动分离处理三类资源。
Shadow DOM 不是“嵌入式应用”的运行环境，它只是提供 DOM 和样式隔离的容器机制；真正要跑逻辑、加载资源、响应交互，还得靠你写的 JS 代码和精心设计的注入流程。
为什么直接 innerHTML = htmlString 会炸
动态插入第三方 HTML 时，shadowRoot.innerHTML = htmlString 看似省事，实则埋雷：
-
<script>标签照常执行，且在全局上下文（window、document），不是 shadow 内部作用域 -
<style>里的规则虽不穿透到外部，但若含!important或高权重选择器（如body * { margin: 0 }），会在 shadow 内污染自身结构 -
<link rel="stylesheet">会发起跨域请求，绕过 shadow 边界控制，还可能触发 CSP 阻断 - 未过滤的
onxxx属性（如onclick）构成 XSS 风险
必须用 DOMParser 解析后手动清理节点树，而不是字符串拼接。
如何安全注入 HTML + 样式 + 有限逻辑
核心是分离内容、样式、脚本三类资源，并分别处理：
立即学习“前端免费学习笔记（深入）”；
- 用
new DOMParser().parseFromString(html, 'text/html')解析字符串，得到干净的Document对象 - 遍历移除所有
script元素：doc.querySelectorAll('script').forEach(s => s.remove()) - 提取
style节点，用CSSStyleSheet实例 +adoptedStyleSheets注入（Chrome 73+/Safari 16.4+ 支持）；老浏览器 fallback 到内联<style>并重写选择器加前缀 - 对
link标签，禁止自动加载；改用 fetch 获取 CSS 文本，再注入<style>或CSSStyleSheet - 需要执行逻辑？定义显式接口，比如暴露
init()方法，在 clean HTML 插入后手动调用，而非放行任意脚本
事件监听和样式穿透怎么写才不翻车
Shadow DOM 隔离的是查询和样式作用域，不是事件流本身。冒泡仍存在，但默认不穿出 shadow boundary（除非设 composed: true）：
- 监听内部按钮点击：必须在
shadowRoot上绑定，或用event.composedPath()捕获路径中的 shadow 内节点 - 想让宿主控制内部样式？只允许通过
:host（影响宿主自身）或::slotted()（仅限传入<slot>的节点），且后者只支持继承性属性（color、font、background-color） - 别写
::slotted(*) { display: block; margin: 0; }—— 这破坏封装契约，使用者无法控制布局 -
mode: "closed"会让host.shadowRoot返回null，调试时连结构都看不到，日常开发请坚持用mode: "open"
最易被忽略的点：Shadow DOM 不提供 JS 执行沙箱，也不阻止 fetch、localStorage、postMessage 等 API 调用。如果嵌入内容需要完全隔离，必须配合 iframe + sandbox 属性，或使用 Service Worker 拦截网络请求——Shadow DOM 只管 DOM 和样式，别的它不管。
