experimentalStyleIsolation常失效，因仅劫持标准style插入；可靠方案是构建时PostCSS加前缀、运行时挂载到带命名空间容器、主应用统一提供基础样式。
直接启用 experimentalStyleIsolation: true 并不能可靠避免 CSS 全局污染，尤其在 Vite 子应用、第三方 UI 库、@import 或动态插入样式等场景下大概率失效。真正可控的路径是「构建时加前缀 + 运行时容器约束 + 主应用兜底」三者缺一不可。
为什么 experimentalStyleIsolation 经常不生效
这个配置本质是给子应用所有 <style> 标签内容的选择器自动加上 [data-name="xxx"] 前缀，但它只劫持标准 DOM 插入路径（head.appendChild(styleEl)），对以下情况完全无感：
- 子应用用
document.write或innerHTML注入样式（常见于老项目或某些 SDK） - Vite 构建的子应用：CSS 通过
import 'xxx.css'直接注入<head>，qiankun 劫持不到 - CSS-in-JS 库（如
styled-components）生成的<style>不走标准 append 流程 -
@import嵌套的外部 CSS 文件不会被递归重写 - Ant Design Vue / Element Plus 的全局样式（如
.ant-btn）仍会写入 document.head
必须在子应用构建时加唯一前缀
PostCSS 是目前最稳定、兼容性最好的编译时方案，不依赖运行时沙箱。以子应用名为 order 为例：
- 安装插件：
npm install postcss-prefix-selector --save-dev - 在
postcss.config.js中配置：module.exports = { plugins: [ require('postcss-prefix-selector')({ prefix: '.subapp-order', exclude: [/node_modules/, /normalize\.css/] }) ] } - 确保构建产物中所有选择器都带前缀（如
.subapp-order .btn），且原始类名（如.btn）不再出现 - 禁用子应用中所有
<link rel="stylesheet">，改用 JS 动态加载并注入到自身容器内（container.appendChild(styleEl)）
子应用 UI 框架必须显式配置命名空间
Element Plus、Ant Design Vue 等库默认输出裸类名，这是污染高发点。不能指望沙箱拦截，必须从初始化源头控制：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Element Plus：在
main.ts初始化时传入{ namespace: 'ep' }，再配合 SCSS 变量覆盖：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep');
- Ant Design Vue：使用
ConfigProvider的prefixCls属性，例如<ConfigProvider :prefixCls="'ad-order'"> - 验证方式：打开 DevTools，搜索
.ep-button或.ad-order-btn，确认 DOM 和 CSS 中均存在，且无未加前缀的同类规则 - Modal / Drawer 等挂载到
body的组件，需统一指定挂载容器：getPopupContainer: () => document.getElementById('subapp-order')
主应用必须统一提供基础样式并禁止子应用重复引入
normalize.css、字体、重置样式等属于基础设施，由主应用一次性加载即可。子应用若再 import 'normalize.css'，不仅浪费资源，还会因加载顺序导致伪随机覆盖：
- 主应用打包时将
normalize.css、通用字体声明、* { box-sizing: border-box }等合并进主 CSS - 子应用移除所有非业务必需的全局样式 import，只保留模块级或组件级样式（如
Button.module.css） - 检查子应用构建产物中的
<link>标签 href，确认没有指向normalize.css、reset.css等基础文件 - 若子应用用了
!important或 ID 选择器（如#header），必须重构——这类规则天然穿透所有隔离机制
最容易被忽略的是：即使所有技术手段都到位，只要子应用里有一处 document.body.insertAdjacentHTML('beforeend', '<style>body{color:red}</style>')，污染就立刻发生。样式隔离不是“开个开关就能稳”，而是每个子应用都要主动放弃对全局样式的幻想，并接受构建链路和运行时容器的双重约束。
