qiankun的strictStyleIsolation无法防止样式污染，仅拦截动态插入的style/link标签；污染主因是UI框架默认类名、@import嵌套、CSS-in-JS、字体动画及主应用全局规则。
qiankun 的 strictStyleIsolation 开关不能防止样式污染——它只拦截动态插入的 和 ，而绝大多数污染来自更隐蔽的路径：UI 框架默认类名、@import 嵌套、CSS-in-JS 库、字体/动画定义，以及主应用已存在的全局重置规则。
禁用子应用所有全局 CSS 导入是硬性前提
子应用里任何 import 'element-plus/dist/index.css' 或 都会直接污染 document.head。qiankun 不解析模块导入，Vite/Webpack 构建时就把这些 CSS 编译成 插入全局，沙箱完全不感知。
- 移除所有
import 'xxx.css'语句，尤其 UI 框架和 reset 类库 - 构建产物中检查
index.html，确认无指向根路径（如/css/app.css） - 若必须复用某份样式，改用 JS 动态加载 +
container.appendChild(styleEl)注入到子应用容器内
UI 框架类名必须从源头改写命名空间
.el-button 和 .ant-btn 这类默认前缀在多个子应用共存时必然冲突——浏览器按选择器权重计算，两个同权重规则，后加载者胜出。靠容器前缀（如 .subapp-order .el-button）无效，因为权重没变，且主应用或其他子应用也用了 el-。
- Vue 项目：初始化
createApp(App)前传入{ namespace: 'ep' }，确保生成.ep-button - Ant Design Vue：配置
prefixCls: 'my-ant' - 同步覆盖 SCSS 变量：新建
element-namespace.scss，用@forward '...' with ($namespace: 'ep')，再通过vite.config.ts的css.preprocessorOptions.scss.additionalData全局注入 - 构建后检查
dist目录下 CSS 文件，确认无裸露的.el-或.ant-
CSS 变量与 BEM block 名必须绑定运行时子应用 ID
--color-primary 这种泛化变量会跨应用继承生效；BEM 的 form__submit-btn 写法也因 block 名未绑定上下文而失效。
- CSS 变量强制加前缀：
--mf-order-color-primary、--mf-user-font-size-lg，禁用嵌套式写法（如--mf-order-form--error-border） - BEM block 名不能写死：读取
window.MICRO_APP_NAME或props.name，Vue 中用const appName = window.MICRO_APP_NAME || 'unknown'，React 封装useAppName()Hook - 验证方式：打开 DevTools，检查 HTML 元素 class 属性是否真实包含当前子应用名（如
order-mgmt__submit-btn），而非泛化名称
Shadow DOM 是唯一能切断层叠链的方案，但需严格配置
attachShadow({ mode: 'closed' }) 是目前浏览器唯一原生支持的真隔离机制——它的样式表不参与主文档层叠计算。但多数人误用：
- 必须设
mode: 'closed'，open模式等于放弃隔离（外部可直接操作shadowRoot） - 渲染目标必须是
shadowRoot：Vue 调用app.mount(shadowRoot)，React 用createRoot(shadowRoot).render()，绝不可挂载到document.body -
不能直接写入shadowRoot.innerHTML，否则逃逸至全局；必须用DOMParser解析后转为CSSStyleSheet，再赋值给shadowRoot.adoptedStyleSheets - 注意兼容性：
adoptedStyleSheets在 Safari 17.4+、Chrome 73+ 支持，旧版需降级 fallback
真正难的不是加前缀或开开关，而是让整个团队停止写 import 'xxx.css'、不再信任“scoped”或“modules”能兜底、并且接受构建时多一道 PostCSS 处理和运行时多一次动态注入——这些步骤漏掉任意一环，污染就藏在下次发布后的某个按钮边框里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
