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

在微前端应用切换过程中，样式污染往往不会立即显现，而是等到新子应用挂载完成后，你才会发现按钮意外变蓝、弹窗被裁切一半、遮罩层莫名消失。导致这一问题的根源其实很明确：旧子应用的CSS规则仍然残留在document.styleSheets中，一旦新应用加载，诸如body { margin: 0 }或.modal-overlay { z-index: 9999 }这样的样式就会产生覆盖冲突。

这种污染的深层原因并非“样式未生效”，而在于子应用卸载时未能彻底清理那些动态插入到document.head或document.body的，虽然DOMParser解析后将其挂载到了容器内，但卸载时并未触发样式回收机制。

这些场景的共同特征在于：样式标签并不位于子应用的根节点之下，导致框架的“自动清理”流程中断。

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

许多开发者存在一个误区：认为启用了qiankun的styled-jsx或scopedCSS功能就能高枕无忧。但实际上，这些机制仅处理子应用挂载期间位于容器内部的