strictstyleisolation: true 并非彻底隔离，仅对子应用挂载到 shadowroot 的 dom 生效；@import、、import 'xxx.css' 等全局样式仍污染 head，弹窗/tooltip/modal、@font-face、css 变量等均不受控，须主应用统一托管基础 css 并约束子应用导入。

strictStyleIsolation: true 不等于“彻底隔离”

开启 strictStyleIsolation: true 确实会为子应用创建 Shadow DOM，但它的作用范围仅限于子应用主动挂载到 shadowRoot 内的 DOM 节点。以下三类 CSS 完全不受控：@import 规则、<link rel="stylesheet"> 标签、构建时已解析的 import 'xxx.css' —— 这些由浏览器原生 fetch 加载，qiankun 没有 hook 点，更不会比对内容哈希去重。

常见错误现象：子应用里写了 import 'normalize.css'，主应用也写了，DOM 中就出现两份 identical 的 <style></style>；ElementPlus 子应用加载后，主应用的 .el-input__inner 边框消失——不是沙箱失效，是样式早已写进全局 。

• Shadow DOM 对 document.body 挂载的弹窗、Tooltip、Modal 无效，需手动指定 appendTo 或 getPopupContainer
• @font-face、@keyframes 无法跨 Shadow Boundary 继承，字体和动画会丢失
• CSS Custom Properties（如 --bs-primary）不被自动带入 shadowRoot，需显式克隆注入

主应用统一提供基础 CSS 是唯一落地底线

把所有非业务专属的全局样式（normalize.css、字体、重置样式、element-plus/theme-chalk/index.css 等）收归主应用打包引入，子应用代码中必须删除对应 import 语句。这是成本最低、确定性最高的方案。

构建后检查子应用产物 index.html，确认没有 <link href="/css/...>%20%E6%8C%87%E5%90%91%E5%85%AC%E5%85%B1%E5%BA%93%E6%A0%B7%E5%BC%8F%EF%BC%9BCI%20%E9%98%B6%E6%AE%B5%E5%8A%A0%E7%A1%AC%E7%BA%A6%E6%9D%9F%E6%8B%A6%E6%88%AA%E6%BC%8F%E7%BD%91%E5%AF%BC%E5%85%A5%EF%BC%9A

%0A

%0A
• Webpack%20%E5%AD%90%E5%BA%94%E7%94%A8%EF%BC%9A%E7%94%A8%20eslint-plugin-import%20%E9%85%8D%E7%BD%AE%20no-restricted-imports%EF%BC%8C%E7%A6%81%E7%94%A8%20normalize.css%E3%80%81bootstrap/dist/css%20%E7%AD%89%E8%B7%AF%E5%BE%84
%0A
• Vite%20%E5%AD%90%E5%BA%94%E7%94%A8%EF%BC%9A%E5%9C%A8%20build.rollupOptions.onwarn%20%E4%B8%AD%E5%8C%B9%E9%85%8D%20.css%20import%20%E5%B9%B6%E6%8A%A5%E9%94%99
%0A
• %E4%B8%BB%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E5%89%8D%E6%89%AB%E6%8F%8F%EF%BC%9Adocument.querySelectorAll('link[href*=" normalize> <h3>UI 框架必须重编译或传 namespace，不能只靠 import</h3> <p>ElementPlus、Ant Design Vue、Bootstrap 这类 UI 库的样式污染不是配置问题，是类名物理重叠导致的覆盖。例如 <code>.el-input__inner 和 .el-button 在主子应用共存时必然冲突。
  

  前端设计优化skill

  前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

  下载

  正确做法是让类名本身不同：

  • ElementPlus：初始化时传 { namespace: 'ep' }，并新建 src/styles/element/index.scss，内容为 @forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep')，再通过 sass-loader.additionalData 或 css.preprocessorOptions.scss.additionalData 全局注入
  • Bootstrap：必须用 Sass 重编译源码，包裹在命名空间块内：.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }；JS 组件（如 Modal）需显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal'))
  • 禁止给 加 class 做隔离，原始 CSS 里根本没有 .bootstrap-iso .btn 这样的规则

  子应用静态资源路径错配会导致样式 404

  子应用构建产物中的 CSS 若用绝对路径（如 /css/app.abc123.css），嵌入主应用后会向根域请求，而实际资源部署在子应用专属路径下（如 /subapp-order/css/app.abc123.css），结果就是 404 + 样式完全不生效。

  必须动态设置构建时的资源基路径：

  • Webpack 子应用：publicPath 设为 process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/'
  • Vite 子应用：build.base 设为 window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/'
  • 构建后手动检查产物中所有 <link href> 的路径，确认与主应用注册子应用时的 entry 一致

  真正难处理的不是“怎么加隔离”，而是“哪些 CSS 已经悄悄进了全局 head 却没人知道”。每次子应用上线前，用 document.styleSheets 遍历 + 正则匹配类名前缀，是最容易被跳过的一步。

  前端入门到VUE实战笔记：立即使用
  在学习笔记中，你将探索 前端 的入门与实战技巧！