子应用切换后按钮颜色突变、弹窗被裁剪、z-index错乱，根本原因是旧子应用的和标签未被移除，仍驻留在document.stylesheets中；qiankun等框架默认仅卸载容器dom节点，却不清理动态插入至document.head或body的样式，尤其ant design modal等挂载到body的组件样式完全脱离容器，沙箱无法自动回收。
卸载时样式残留的典型现象和根本原因
子应用切换后按钮颜色突变、弹窗被裁剪、z-index 错乱，不是样式“没生效”，而是旧子应用的 style 标签还挂在 document.styleSheets 里。qiankun 等框架默认只移除容器 DOM 节点，但不会清理它动态插入到 document.head 或 document.body 的 <style></style> 和 <link rel="stylesheet"> —— 尤其是 Ant Design Modal 这类挂载到 document.body 的组件，其样式完全脱离容器，沙箱自动回收不了。
qiankun strictStyleIsolation 为什么经常失效
这个配置只劫持标准 DOM 插入流程，对以下情况完全无感：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 子应用用
document.head.innerHTML += '<style>...</style>'拼字符串注入（绕过劫持） - 使用
styled-components或emotion，它们生成的<style></style>不走appendChild - CSS 文件里写了
@import "theme.css"，qiankun 不会递归解析并重写路径 - 主应用提前加载了
normalize.css，子应用的button { margin: 0 }被它覆盖，这不是子应用能控制的
真正有效的销毁方式：挂载即注入，卸载即销毁
HTML Entry 模式下，样式隔离的核心机制就是“挂载即注入，卸载即销毁”——子应用卸载时，主应用必须把整个子应用根节点（含所有动态插入的 <style></style>、<link>）一并从 DOM 中移除。实操要点：
- 确保子应用所有 UI 框架挂载点都限定在容器内：
getContainer: () => document.getElementById('sub-app-container') - 禁用第三方库默认挂
document.body的行为，比如封装AntdModal并强制getContainer={() => subAppRoot} - 主应用在
unmount钩子中手动遍历并移除该子应用可能插入的所有<style></style>和<link>标签（可基于data-app-id属性标记） - 若用 Shadow DOM，必须设为
mode: "closed"，且所有 DOM 操作都限定在shadowRoot内，否则照样泄漏
容易被忽略的关键细节
很多人以为启用 strictStyleIsolation 或加了 scoped 就万事大吉，但真正漏掉的是那些“跳出容器”的操作：子应用在 componentDidMount 里调用 loadCSS('theme.css') 手动插入 <link>；HTML Entry 中自带的全局 <style>body { background: #f0f0f0 }</style>；甚至构建产物里 CSS 是绝对路径导致 404 后浏览器仍缓存旧规则。这些都不会被沙箱自动识别，必须靠主应用统一接管注入入口、强制走 injectStyle(text) 接口，并在卸载时连同容器一起物理删除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
