HTML结构在微前端子应用切换中的样式污染与DOM沙箱隔离研究

子应用切换时样式污染的典型表现是旧子应用CSS规则残留于document.styleSheets，导致新子应用挂载后覆盖主应用或其他子应用样式，如按钮颜色突变、弹窗裁剪、z-index错乱等；根本原因是卸载时未清理动态插入至document.head或document.body的<style>和<link>标签，尤其当UI组件（如Ant Design Modal）默认挂载到document.body时，其样式脱离容器无法被沙箱自动回收。

子应用切换时样式污染的典型表现

不是“样式没生效”，而是旧子应用的 CSS 规则还在 document.styleSheets 里，新子应用一挂载，body { margin: 0 } 或 .modal-overlay { z-index: 9999 } 直接覆盖主应用或其它子应用。常见现象包括：按钮颜色突变、弹窗被裁剪、全局字体重置、z-index 错乱导致遮罩失效。

根本原因在于：微前端框架（如 qiankun）卸载子应用时，只移除了容器 DOM 节点，但没清理它动态插入的 <style> 标签——尤其是那些通过 document.head.appendChild 加入的、不在子应用根节点下的样式。

• 子应用使用 ant-design 的 Modal，默认挂载到 document.body，其 <style> 标签脱离容器，卸载时漏删
• 子应用在 componentDidMount 里调用 loadCSS('theme.css')，手动插入 <link> 到 document.head
• 子应用 HTML Entry 中含全局 <style>body { background: #f0f0f0 }</style>，DOMParser 解析后直接挂载进容器，但卸载时未触发样式回收

DOM 沙箱隔离 ≠ 自动清理所有 style 标签

很多人误以为启用 qiankun 的 styled-jsx 或 scopedCSS 就万事大吉，其实这些机制只处理子应用挂载期间注入的、位于容器内部的 <style>。一旦子应用跳出容器操作 document.head 或 document.body，沙箱就完全失能。

关键判断点：document.querySelector('#sub-app-container').shadowRoot 返回 null？那说明没启用 Shadow DOM；document.styleSheets 列表里还有不属于当前子应用的 CSSStyleSheet？说明卸载逻辑没覆盖到。

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

• 强制所有样式注入走主应用提供的 injectStyle(text) 接口，而非子应用直写 document.head
• 子应用 UI 框架（如 React）必须配置 getContainer: () => document.getElementById('sub-app-container')，禁用默认挂载到 document.body
• 对第三方库做 wrapper：比如封装 AntdModal，内部强制 getContainer={() => subAppRoot}

HTML Entry 场景下 DOM 沙箱的实际边界

DOMParser 解析子应用 index.html 后，只把 doc.body.innerHTML 挂载进容器，这个过程本身不创建沙箱——它只是字符串转 DOM 片段。真正的隔离靠后续动作：是否把提取出的 <style> 转为 CSSStyleSheet 并注入 shadowRoot.adoptedStyleSheets，是否拦截所有 script.src 并在沙箱环境执行。

容易踩的坑是：以为“用了 HTML Entry 就天然隔离”。实际上，如果子应用 HTML 里有 <script>window.xxx = 1</script>，且主应用没用 execScripts 包装执行，这段代码就在全局运行，污染 window。

• 子应用内联脚本必须由主应用沙箱函数（如 qiankun 的 execScripts）包裹执行，不能直接 eval 或注入 <script> 标签
• 子应用静态资源路径必须为绝对 URL，否则 fetch('./main.js') 会 404；或主应用需提前设置 __webpack_public_path__
• <base href="/subapp/"> 必须存在于子应用 HTML 中，否则相对路径的图片、字体、fetch 请求全部失败

Shadow DOM 不是万能解药，但它是唯一原生作用域

用 this.attachShadow({ mode: 'closed' }) 确实能切断外部样式穿透和内部样式逃逸，但它会切断 document.querySelector、window.addEventListener、@font-face 加载等能力。生产环境若强行整应用挂载进 Shadow DOM，大概率出现字体加载失败、事件监听器注册无效、第三方组件无法渲染等问题。

真正可行的路径是：轻量级子应用（如纯 Web Component 卡片）用 Shadow DOM；复杂 SPA 子应用仍用样式沙箱 + 严格约束 DOM 操作边界 + 主应用统一接管资源注入。

最常被忽略的一点：即使启用了 Shadow DOM，子应用若调用 document.createElement('div') 后没 append 到 this.shadowRoot，而是 append 到 document.body，那这个节点就完全脱离隔离范围——样式、事件、生命周期都失控。