根本原因是浏览器将所有微应用css统一写入全局样式表，按层叠规则计算优先级；experimentalstyleisolation对vite无效因其绕过qiankun劫持链；normalize.css重复加载导致变量覆盖；ui框架类名冲突需scss变量同步注入；唯shadow dom（closed模式）可真正隔离样式，但自定义属性仍需手动加前缀。
微前端子应用动态加载 CSS 会互相覆盖，根本原因不是“谁先谁后”的加载顺序问题，而是浏览器压根不区分微应用——所有 <style></style> 标签、所有 CSS 规则，最终都写进同一个全局样式表（document.styleSheets），按标准层叠规则计算优先级，后插入的、特异性更高的规则直接赢。
为什么 experimentalStyleIsolation 在 Vite 子应用里基本失效
qiankun 的 experimentalStyleIsolation: true 只能劫持 Webpack style-loader 注入 <style></style> 的路径；Vite 子应用走的是 import 'xxx.css' → JS 动态创建 <style></style> → document.head.appendChild() 这条链，qiankun 沙箱根本插不进去。
- 验证方式：DevTools → Elements → 搜索
.btn，如果看到裸露未加前缀的选择器，说明隔离没生效 - Webpack 子应用可配合
css-loader?modules，但必须同步改所有className引用，成本高 - Vite 子应用必须放弃依赖该配置，改用构建时干预
为什么两个子应用都 import 'normalize.css' 就出事
qiankun 不做去重，每个子应用 import 一次，就往 document.head 插一份 identical 的 <style></style> 标签。虽然渲染结果可能一样，但：
- 加载顺序不确定 → 谁的
:root里--color-primary先解析完，谁就“赢” - 多份相同 CSS 白占带宽和解析时间
- 若某子应用还动态改了
document.documentElement.style.setProperty('--color-primary', ...)，污染立刻跨应用传播
为什么 UI 框架类名（如 .el-input__inner）一碰就炸
ElementUI 和 ElementPlus 都用 el- 前缀，但实现细节不同（一个用 border，一个用 box-shadow 模拟），一旦共存，后加载的 CSS 直接覆盖前者的边框定义——这不是沙箱能拦的，规则已经进 DOM 了。
- 只配
app.use(ElementPlus, { namespace: 'ep' })不够：JS 渲染出ep-button，但 SCSS 编译产物里仍是.el-button，因为变量没同步覆盖 - 必须新建
src/styles/element-namespace.scss，用@forward 'element-plus/.../config.scss' with ($namespace: 'ep') - 再通过
css.preprocessorOptions.scss.additionalData全局注入，确保--ep-color-primary和.ep-button同时存在
真正能切断层叠链的只有 Shadow DOM
scoped、CSS Modules、选择器前缀，全都是“降低冲突概率”，不是“隔离”。只有 attachShadow({ mode: 'closed' }) 能让子应用样式完全不参与主文档的层叠计算。
- 必须用
mode: 'closed'：open 模式下外部脚本仍可访问shadowRoot，等于白搭 - 挂载目标必须是
shadowRoot：Vue 要createApp(App).mount(shadowRoot)，不能 mount 到#subapp-order这种普通 div - 样式注入要手动：不能靠
<link rel="stylesheet">直接扔进 shadowRoot，得用const style = document.createElement('style'); style.textContent = cssText; shadowRoot.appendChild(style)
最易被忽略的一点：即使用了 Shadow DOM，如果子应用 JS 里还调用 document.documentElement.style.setProperty('--theme-color', ...)，这个变量依然会泄漏到主应用——自定义属性（CSS Custom Properties）不随 Shadow DOM 隔离，必须强制加 app-id 前缀，比如 --mf-order-theme-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
