纯靠qiankun的strictStyleIsolation或experimentalStyleIsolation无法解决UI框架类名冲突，必须构建时加命名空间、运行时控制注入路径、容器级选择器前缀三者并用；Element Plus等须改namespace为ep-button，禁用静态link，Vite子应用需postcss-prefix-selector，Shadow DOM closed模式是唯一真隔离但需挂载到shadowRoot且重置继承样式。
直接结论：纯靠 qiankun 的 strictStyleIsolation 或 experimentalStyleIsolation 无法解决 UI 框架类名冲突，必须在构建时加命名空间 + 运行时控制注入路径 + 容器级选择器前缀三者并用。
Element Plus / Ant Design 等 UI 库必须改 namespace，不能只靠沙箱
子应用引入 element-plus 后仍生成 .el-button 类名，说明命名空间没生效——沙箱拦不住已写入 DOM 的 CSS 规则，后加载的样式会直接覆盖主应用同名类。常见错误现象包括输入框边框消失、按钮颜色错乱、下拉菜单定位偏移。
- Vue 3 子应用：在
main.ts初始化时传入{ namespace: 'ep' }，确保组件渲染出.ep-button而非.el-button - 同步重写 SCSS 变量：新建
src/styles/element-namespace.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep') - Vite 项目需在
vite.config.ts中配置css.preprocessorOptions.scss.additionalData全局注入该文件；Webpack 项目对应配置sass-loader.additionalData - 构建后检查 HTML 和 DevTools 的 Styles 面板，确认真实出现的是
.ep-button，而非残留的.el-button
Vite 子应用的 experimentalStyleIsolation 基本无效，必须用 PostCSS 插件
qiankun 的 experimentalStyleIsolation 依赖劫持 document.head.appendChild，但 Vite 默认通过 import './index.css' 注入样式，走的是 JS 模块执行路径，qiankun 劫持不到，样式照常进全局。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在子应用根目录配
postcss.config.js，启用postcss-prefix-selector - 指定唯一前缀如
.subapp-order，插件会自动将.btn→.subapp-order .btn、input[type="text"]→.subapp-order input[type="text"] - 禁用所有
<link rel="stylesheet">：构建时移除 HTML 中的静态 link 标签，改用 JS 动态创建<style>并插入到子应用容器节点内 - 验证方式：DevTools 中搜索
.subapp-order，确认所有规则都带该前缀，且无裸露的.btn或.ep-input
Shadow DOM 是唯一能切断层叠链的方案，但 mode 必须设为 closed
scoped、CSS Modules、前缀等都只是“降低冲突概率”，浏览器仍统一计算优先级；只有 attachShadow({ mode: 'closed' }) 能让子应用样式表完全不参与主文档的层叠计算。
立即学习“前端免费学习笔记（深入）”；
- 子应用挂载目标必须是
shadowRoot：Vue 用createApp(App).mount(shadowRoot)，React 用createRoot(shadowRoot).render()，绝不可挂到document.body -
mode: 'closed'下el.shadowRoot返回null，防止外部脚本篡改，这是生产环境唯一安全模式 - 不能靠
<link rel="stylesheet">直接扔进 shadowRoot：需手动创建style元素，或使用adoptedStyleSheets（注意 Safari 17.4+、Chrome 73+ 支持） - 第三方库若调用
document.querySelector或依赖全局document.body，大概率报错或失效，需封装适配层
真正容易被忽略的点是：主应用提前加载的 normalize.css 或重置样式（如 button { margin: 0 }）仍会影响子应用，因为 Shadow DOM 不隔离继承链外的初始值。这意味着即使用了 closed Shadow DOM，字体、颜色、line-height 等仍可能被主应用 CSS 透传影响，需在子应用 shadowRoot 内显式重置或使用 all: initial 配合关键属性覆盖。
