微前端子应用切换时的全局样式污染，根源是旧子应用注入的标签未被移除，仍存在于document.stylesheets中，导致新子应用样式覆盖主应用或其他子应用；qiankun等框架默认仅移除容器dom节点，对手动插入、antd挂载到body、html entry中domparser解析出的样式均无回收机制。
微前端子应用切换时的全局样式污染，根本不是“样式没清干净”，而是旧子应用注入的 <style></style> 标签根本没被移除——它们还挂在 document.styleSheets 里，新子应用一挂载，.modal-overlay { z-index: 9999 } 就直接覆盖主应用或其它子应用。
为什么卸载后 document.styleSheets 还残留旧样式
qiankun 等框架默认只移除容器 DOM 节点，但对以下三类动态插入的样式完全无感：
- 子应用通过
document.head.appendChild(<style>...</style>)手动插入的样式 - Ant Design Modal 默认挂载到
document.body，其关联的<style></style>标签脱离容器节点 - HTML Entry 场景下，DOMParser 解析出的
<style></style>直接塞进容器，但卸载时没触发回收逻辑
这些样式一旦进入 document.styleSheets，就和主应用样式平权竞争，选择器优先级高者胜出，body { margin: 0 } 这种规则尤其致命。
如何定位残留样式来源
别猜，直接查：
- 打开 DevTools → Elements →
，手动搜索<style></style>或<link rel="stylesheet">是否还在 - 运行
Array.from(document.styleSheets).filter(s => s.ownerNode && !s.ownerNode.closest('#sub-app-container'))，列出所有不属于当前子应用容器的样式表 - 检查
document.querySelector('#sub-app-container').shadowRoot是否为null：是，则说明没启用 Shadow DOM，所有隔离机制都失效
注意：qiankun 的 strictStyleIsolation: true 只劫持标准 DOM 插入路径，对 document.write、CSS-in-JS 动态生成、@import 嵌套等场景完全不生效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
强制样式注入走主应用统一入口
子应用不能自己碰 document.head，必须由主应用桥接：
- 主应用暴露
window.__injectStyle = (text) => { ... }接口，子应用调用时，主应用负责将text转为CSSStyleSheet并注入到当前 shadowRoot（若启用）或 scoped 容器内 - 第三方 UI 库（如 Ant Design）必须重写挂载点：
getContainer: () => document.getElementById('sub-app-container')，禁用默认挂载到document.body - 封装
AntdModal等组件，内部强制指定getContainer指向子应用根节点，避免样式逃逸
关键细节：HTML Entry 场景下，DOMParser 解析后只取 doc.body.innerHTML 挂载，这个过程本身不创建沙箱——真正的隔离边界必须靠 attachShadow({ mode: 'closed' }) 在 constructor() 中主动建立，晚一秒都来不及。
adoptedStyleSheets 注入的现实约束
shadowRoot.adoptedStyleSheets = [sheet] 是目前最可控的注入方式，但它有硬伤：
- 不支持
@import规则，需提前展开并递归解析 - 相对路径（如
url(./img.png)）会以主应用为基准解析，必须转为绝对路径或 base64 内联 - CSS 变量继承链断裂：外部定义的
--primary-color在 shadow 内不可用，需显式透传或重写 - Safari 16.4+ / Chrome 73+ 才支持，老版本需 fallback 到
<style></style>+ scoped 属性 + 构建时前缀
真正稳的做法不是依赖某一种技术，而是把样式注入、DOM 操作、资源加载全部收归主应用桥接层——子应用只提供 HTML 字符串和 JS 逻辑，其余均由宿主按沙箱规则执行。否则，任何跳出容器的操作，都是在隔离墙上凿洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
