shadowRoot.innerHTML = htmlString会破坏隔离，因浏览器直接在全局作用域解析执行内联<style>和<script>，导致样式逃逸、脚本污染及XSS风险；正确做法是用DOMParser解析后分治处理，style转CSSStyleSheet注入adoptedStyleSheets，script剥离并在沙箱中重绑定执行。

不存在“硬件级硬隔离”，浏览器不提供任何硬件层面的 HTML 渲染隔离能力；所谓“硬隔离”是软件工程实现，最接近原生方案只有 iframe（进程/上下文级），或 attachShadow({ mode: 'closed' })（DOM/CSS 作用域级）——但两者都需严格规避常见逃逸路径，否则隔离即失效。

为什么 shadowRoot.innerHTML = htmlString 会直接破坏隔离

这是微前端中最常踩的坑：把含 <style> 或 <script> 的 HTML 字符串直接赋给 shadowRoot.innerHTML，会导致：

• <style>.btn{color:red}</style> 内容漏出到全局 <head>，污染整个页面
• <script>document.body.classList.add('dark')</script> 在全局上下文执行，不是 shadow 内部
• 控制台报错 Failed to execute 'querySelector' on 'Document': The provided selector is empty（因脚本在全局执行但 DOM 尚未挂载）

根本原因：浏览器对 innerHTML 的解析不经过任何沙箱控制逻辑，所有内联样式和脚本都在全局作用域中加载、执行、注入。

正确做法是用 DOMParser 解析后分治处理：<style> 转为 CSSStyleSheet 实例，再通过 shadowRoot.adoptedStyleSheets = [sheet] 注入；<script> 必须剥离，在沙箱中重绑定 this/window/document 后执行。

立即学习“前端免费学习笔记（深入）”；

attachShadow({ mode: 'closed' }) 必须在 constructor() 中调用

延迟到 connectedCallback 或更晚调用 this.attachShadow({ mode: 'closed' })，等于 DOM 已渲染、CSS 已计算完毕，污染不可逆。

关键点：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 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> 标签
• 不支持 @import 规则，也不支持相对路径如 url(./img.png) 或 CSS 变量继承链
• 提取 <style> 内容后，需用 new CSSStyleSheet() 创建实例，再调用 sheet.replaceSync(text)
• 拦截 <link rel="stylesheet">，fetch 后转为 CSSStyleSheet 注入，而非直接 append 到 shadowRoot

若子应用使用了 Webpack 的 CSS 提取插件或第三方 UI 库的样式文件，必须在主应用侧做资源代理与重写，否则样式加载失败或路径 404。

子应用动态插入的 <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> 更可靠，也无需依赖 adoptedStyleSheets 兼容性。