微前端css隔离必须主动控制：vite子应用需用postcss-prefix-selector加前缀，ui库如elementplus须配置namespace（如ep-），主应用统一提供基础样式，禁用子应用link引入全局css，否则必然发生样式覆盖与污染。
因为 CSS 天然全局生效，而微前端不改变这个事实——所有子应用和主应用共享同一个 document，所有 link 和 style 标签注入的规则都参与同一套层叠计算。
第三方 UI 框架类名前缀完全重叠
ElementUI 和 ElementPlus 都用 el- 开头，Ant Design 和 Ant Design Vue 默认都是 ant-。两个子应用同时加载，后插入的 el-input__inner 规则会覆盖先加载的，哪怕它们是不同版本、不同框架、不同构建产物。
- Vue2 子应用引入
element-ui/lib/theme-chalk/index.css，生成.el-button - Vue3 子应用引入
element-plus/theme-chalk/css/index.css，也生成.el-button - 浏览器不区分来源，只按选择器权重 + 加载顺序决定谁生效
- 表现就是：切换页面后输入框边框消失、按钮颜色突变、弹窗 z-index 错乱
Vite 子应用的 CSS 注入路径绕过 qiankun 隔离
qiankun 的 experimentalStyleIsolation 本质是劫持 appendChild 到 head 的行为，但 Vite 构建时把 CSS 打包成 JS 模块，执行的是 import './index.css' → 动态创建 style 标签 → document.head.appendChild()。这个过程在子应用沙箱内完成，qiankun 无法拦截。
- 结果是：子应用的样式仍直接进全局
head，不是挂到容器节点下 -
experimentalStyleIsolation对 Vite 项目基本无效，别依赖它 - 验证方式：打开 DevTools，搜索
.el-button，如果它出现在里而非子应用容器内，就确认被绕过了
normalize.css / reset.css 被重复加载且无序
每个子应用都可能自己 import 'normalize.css'，qiankun 不做去重。两份 identical 的 <style></style> 标签并存，看似无害，实则埋雷：
- 加载时机错位：子应用 A 的 normalize 在主应用样式之后，子应用 B 的在之前 → 基础盒模型表现不一致
- 字体继承链断裂：一个子应用设了
html { font-size: 62.5% }，另一个没设，导致 rem 计算错乱 - 解决办法不是“让每个子应用自己管”，而是主应用统一提供基础样式，子应用禁用所有全局重置类 import
真正难的不是选 Shadow DOM 还是 CSS Modules，而是所有团队是否约定好：UI 库必须加命名空间、子应用禁用 link[rel="stylesheet"]、构建产物里不能出现裸露的 .btn 类名——这些不会报错，只会让 QA 测不出、用户说不清、开发者查三天找不到源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
