shadowroot.innerhtml = htmlstring会破坏隔离，因浏览器直接在全局作用域解析执行内联和，导致样式逃逸、脚本污染及xss风险；正确做法是用domparser解析后分治处理，style转cssstylesheet注入adoptedstylesheets，script剥离并在沙箱中重绑定执行。
不存在“硬件级硬隔离”，浏览器不提供任何硬件层面的 HTML 渲染隔离能力；所谓“硬隔离”是软件工程实现，最接近原生方案只有 iframe（进程/上下文级），或 attachShadow({ mode: 'closed' })（DOM/CSS 作用域级）——但两者都需严格规避常见逃逸路径，否则隔离即失效。
为什么 shadowRoot.innerHTML = htmlString 会直接破坏隔离
这是微前端中最常踩的坑：把含 <style></style> 或 <script></script> 的 HTML 字符串直接赋给 shadowRoot.innerHTML，会导致：
-
<style>.btn{color:red}</style>内容漏出到全局，污染整个页面 -
<script>document.body.classList.add('dark')</script>在全局上下文执行，不是 shadow 内部 - 控制台报错
Failed to execute 'querySelector' on 'Document': The provided selector is empty（因脚本在全局执行但 DOM 尚未挂载）
根本原因：浏览器对 innerHTML 的解析不经过任何沙箱控制逻辑，所有内联样式和脚本都在全局作用域中加载、执行、注入。
正确做法是用 DOMParser 解析后分治处理：<style></style> 转为 CSSStyleSheet 实例，再通过 shadowRoot.adoptedStyleSheets = [sheet] 注入；<script></script> 必须剥离，在沙箱中重绑定 this/window/document 后执行。
attachShadow({ mode: 'closed' }) 必须在 constructor() 中调用
延迟到 connectedCallback 或更晚调用 this.attachShadow({ mode: 'closed' })，等于 DOM 已渲染、CSS 已计算完毕，污染不可逆。
关键点：
-
mode: 'open'允许外部脚本通过el.shadowRoot直接篡改内部节点或样式表，生产环境必须禁用 -
mode: 'closed'下el.shadowRoot返回null，外部无法访问，这是唯一有效模式 - CI/CD 流水线应强制校验：所有
attachShadow调用必须含{ mode: 'closed' }，否则阻断构建
DevTools 可查看 #shadow-root（需开启“Show user agent shadow DOM”），但 closed 模式下 JS 无法直接读写 shadow 内容——这是安全代价，不是缺陷。
adoptedStyleSheets 不支持 @import 和相对路径
这是实际落地时最容易忽略的兼容性限制（截至 2026 年 7 月）：
-
adoptedStyleSheets只接受CSSStyleSheet实例，不能直接写入<style></style>标签 - 不支持
@import规则，也不支持相对路径如url(./img.png)或 CSS 变量继承链 - 提取
<style></style>内容后，需用new CSSStyleSheet()创建实例，再调用sheet.replaceSync(text) - 拦截
<link rel="stylesheet">，fetch后转为CSSStyleSheet注入，而非直接 append 到shadowRoot
若子应用使用了 Webpack 的 CSS 提取插件或第三方 UI 库的样式文件，必须在主应用侧做资源代理与重写，否则样式加载失败或路径 404。
子应用动态插入的 <style></style>/<link> 卸载时为何漏清理
微前端框架（如 qiankun）卸载时只移除容器节点及其子树，但子应用若在挂载后执行 document.head.appendChild(style) 或使用 Ant Design Modal 默认挂载到 document.body，这些节点不在容器内，沙箱完全失能。
解决方案不是手动遍历删除，而是坚持“挂载即注入，卸载即销毁”原则：
- 所有样式资源必须挂载在子应用根节点内（含 Shadow DOM 中的
adoptedStyleSheets） - 禁止子应用直接操作
document.head或document.body - 第三方库（如 Modal、Tooltip）需配置
getContainer指向子应用容器，而非默认document.body
样式卸载靠 DOM 移除触发浏览器自动重建 CSSOM，比手动删 <style></style> 更可靠，也无需依赖 adoptedStyleSheets 兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
