strictStyleIsolation 无法彻底隔离样式，因其仅劫持动态插入的 style/link 标签，而 @import、CSS-in-JS、预置 link、全局规则、Vite 模块化加载等五类场景均绕过沙箱；Vite 子应用需禁用 experimentalStyleIsolation，改用 postcss-prefix-selector 加前缀、JS 动态注入、命名空间配置及主应用统一 reset 才能实现有效隔离。
strictStyleIsolation 看似能“彻底隔离”，但实际项目中它几乎必然漏样式——不是配置没开，而是根本机制就覆盖不到关键路径。
为什么 strictStyleIsolation: true 会失效
它只劫持动态插入的 和 ，以下五类完全绕过沙箱：
-
@import规则写在 CSS 文件内部，qiankun 不解析嵌套内容 -
styled-components、emotion直接调用insertRule或操作document.styleSheets，不走 DOM 插入流程 - 子应用构建时保留了
，404 后静默失败，控制台无报错，样式却没加载 - 主应用已注入
normalize.css，子应用的button { margin: 0 }仍被覆盖——沙箱不干预已有全局规则 - Vite 子应用中
import './index.css'走 ES 模块链，最终由 style 标签注入head，qiankun 劫持不到该过程
Vite 子应用必须禁用 experimentalStyleIsolation
这个选项对 Vite 构建的子应用基本无效。Vite 的 CSS 加载不经过 qiankun 的 DOM 插入钩子，启用后既不报错也不生效。
正确做法是工程化前移：
- 在
postcss.config.js中配postcss-prefix-selector，指定唯一前缀如.subapp-order - 移除所有
，改用 JS 动态加载并注入到子应用容器内：container.appendChild(styleEl) - 设置
build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/'，确保资源路径与主应用注册的entry一致
UI 框架类名必须从源头改写，不能只靠 CSS 前缀
Element Plus 的 .el-button、Ant Design Vue 的 .ant-btn 这类默认类名，即使加了容器前缀（如 .subapp-order .el-button），仍可能被后加载的同名规则覆盖——因为浏览器按选择器权重计算，而两个子应用都用了 el- 前缀，权重相同。
必须做三件事：
- 在
main.ts中为 Element Plus 配置namespace：app.use(ElementPlus, { namespace: 'ep-order' }) - 禁用子应用中所有未加命名空间的全局选择器，尤其是
body、button、* {} - 主应用统一提供基础重置（reset），且禁止子应用再引入自己的
normalize.css或reset.css
closed Shadow DOM 是唯一真隔离，但代价极高
它确实能切断样式泄漏，但要求所有渲染挂载到 shadowRoot，且禁用 document/window 全局 API。这意味着：
- 第三方弹窗、Tooltip、DatePicker 默认挂载到
document.body，必须逐个重写getPopupContainer或appendTo -
document.querySelector、getComputedStyle、window.addEventListener全部失效，大量 UI 库直接报错 - Safari 对 CSS 自定义属性继承有 bug；IE 完全不支持；Chrome DevTools 在
closed模式下无法调试内部结构
真正落地时，没人靠单一开关实现“彻底隔离”。编译时加前缀 + 运行时容器约束 + 主应用兜底重置，这三层缺一不可。最容易被忽略的是：主应用的 reset 必须早于任何子应用加载，且子应用不得重复引入同类 reset —— 否则权重和顺序一乱，前缀再密也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
