必须禁用子应用全局CSS导入，改用命名空间隔离（如Element Plus设namespace为'ep'）、JS动态注入样式、构建时修正资源路径（Vite配build.base，Webpack配publicPath）三步法实现真正隔离。
为什么 import 'xxx.css' 在子应用里是高危操作
qiankun 不拦截 ES 模块导入的 CSS，Vite/Webpack 会把 import 'element-plus/dist/index.css' 编译成 <style></style> 标签并插入 document.head，沙箱完全不感知。结果就是：两个子应用都引入同一份 normalize.css，DOM 里出现两份 identical 的 <style></style>，加载顺序决定谁赢，视觉表现伪随机。
-
@import嵌套在已加载的 CSS 文件内，qiankun 不解析内容，直接放行 - CSS-in-JS 库（如
styled-components）调用insertRule或操作document.styleSheets，不走 DOM 插入流程 - 子应用 JS 中执行
document.head.innerHTML += '<style></style>'—— 绕过所有劫持
如何让 UI 框架类名真正隔离（以 Element Plus 为例）
只给容器加 class="subapp-order" 再写 .subapp-order .el-button 是无效的——因为主应用和其他子应用也用 el- 前缀，权重相同，后加载者胜出。唯一解是让子应用的 el-button 变成 ep-button。
- 在
main.ts初始化时传参：app.use(ElementPlus, { namespace: 'ep' }) - 新建
src/styles/element/index.scss，内容为：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep') - Vite 用户：在
vite.config.ts的css.preprocessorOptions.scss.additionalData中全局注入该 SCSS - 构建后检查 HTML 和 CSS 源码，确认真实出现的是
.ep-button，而非残留的.el-button
如何确保 CSS 资源路径不 404 且样式只作用于本容器
子应用构建产物中若含 <link href="/css/app.abc.css">，嵌入主应用后会向根路径请求资源，而实际部署在 /subapp-order/css/app.abc.css，结果就是 404 + 样式完全不生效。
- Webpack 子应用配
publicPath为运行时动态值：process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用配
build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 移除所有
<link href="/xxx.css">，改用 JS 动态加载并注入到子应用容器内：container.appendChild(styleEl) - 验证方式：打开 DevTools → Network，确认所有 CSS 请求路径与主应用注册子应用时的
entry一致
为什么 Shadow DOM 是唯一真隔离但极少被用
它能切断层叠链——样式表不参与主文档的层叠计算。但代价极高：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 渲染目标必须是
shadowRoot，不能挂载到document.body；createApp(App).mount(shadowRoot)才有效 - 子应用若用了
document.querySelector、getComputedStyle或第三方组件库（如 Element Plus），大概率直接报错或失效 - 必须用
mode: 'closed'：否则外部脚本能访问shadowRoot，等于没隔离 - 字体、动画、CSS 变量（
--bs-primary）等不会被自动隔离，仍需手动前缀处理
document.head，就天然参与整个页面的层叠计算。所谓“隔离”，本质是不让它进去，或者让它进去时自带唯一上下文标识。 
