qiankun 中 vite 子应用 css 污染主应用是因构建时内联样式直接插入 document.head，experimentalstyleisolation 无法劫持；需用 postcss-prefix-selector 加容器前缀、禁用 link 标签、动态注入样式、ui 框架启用命名空间、strictstyleisolation 启用 shadow dom 隔离。
qiankun 里子应用引入 CSS 导致样式污染，不是配置没开对，而是默认行为就注定会污染——import 'xxx.css' 或 <link rel="stylesheet"> 这类操作在浏览器眼里没有“微前端”概念，CSS 就是全局生效的。
为什么 experimentalStyleIsolation: true 对 Vite 子应用基本无效
这个配置只劫持动态插入的 <style></style> 和 <link rel="stylesheet">，但 Vite 的 CSS 加载走的是 ES 模块链：import './index.css' → 构建时内联或生成 style 标签 → 直接插入 document.head。qiankun 完全插不进去。
- 现象：DevTools 中能看到子应用样式出现在主应用
下，且无任何容器前缀（如[data-qiankun]） - 后果：多个 Vite 子应用同时加载
normalize.css，DOM 中出现两份 identical<style></style>；后加载的.btn直接覆盖先加载的 - 验证方式：搜索
document.head.innerHTML，确认有没有带前缀的规则；检查构建产物中是否还存在裸露的.el-button类名
Vite 子应用必须用 postcss-prefix-selector 加前缀
这是目前最稳定、可落地的编译时隔离手段，核心是让所有选择器都带上唯一容器前缀，比如 .subapp-order .btn，从而把作用域锁死在子应用容器内。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在
postcss.config.js中配置：postcss-prefix-selector插件，指定前缀如.subapp-order - 必须禁用所有
<link href="/css/xxx.css">：构建时移除 HTML 模板里的 link，改用 JS 动态加载并注入到子应用容器节点：container.appendChild(styleEl) - 路径要对齐：设置
build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/'，否则 CSS 文件 404，控制台静默失败，样式直接消失 - 注意副作用：加前缀后，若子应用内有 JS 手动查
document.querySelector('.btn')，需同步改成container.querySelector('.subapp-order .btn')
UI 框架类名不能靠 CSS 前缀“打补丁”
像 Element Plus 的 .el-button、Ant Design Vue 的 .ant-btn 这类默认类名，即使加了容器前缀（.subapp-order .el-button），仍可能被另一个子应用的同权重规则覆盖——因为两个子应用都用了 el- 前缀，浏览器按选择器权重算，谁后加载谁赢。
- Vue 项目初始化时必须传命名空间：
createApp(App).use(ElementPlus, { namespace: 'ep' })，生成.ep-button - SCSS 变量也要同步改写：新建
src/styles/element/index.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep') - Vite 需通过
css.preprocessorOptions.scss.additionalData全局注入该文件，确保组件库内部 SCSS 编译也使用新命名空间 - 构建后务必检查 DOM 和 CSS 文件，确认真实输出的是
.ep-button，而不是残留的.el-button
strictStyleIsolation: true 是唯一真隔离，但代价很高
启用后 qiankun 会调用 attachShadow({ mode: 'closed' })，子应用整个挂载进 Shadow DOM，其样式表完全不参与主文档层叠计算——这是浏览器原生保障，不是模拟。
- 必须用
mode: 'closed'：open 模式下外部脚本仍可访问shadowRoot，等于没隔离 - 子应用渲染目标必须是
shadowRoot：Vue 要createApp(App).mount(shadowRoot)，React 要createRoot(shadowRoot).render()，绝不能挂到document.body或普通容器 - 第三方组件穿透问题突出：Ant Design 的
Modal、Tooltip默认挂载到document.body，需显式配置getPopupContainer指向shadowRoot - 字体、
@keyframes、@import等仍需手动处理：Shadow DOM 不自动隔离这些，得靠 JS 动态注入或构建时重写
真正难的不是加前缀或开开关，而是所有环节必须对齐：构建路径、CSS 注入时机、UI 库初始化、运行时挂载目标——漏掉任意一环，样式就可能从缝隙里漏出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
