微前端样式污染是必然结果，主流框架的样式沙箱配置仅控制挂载方式或做有限前缀处理，无法彻底隔离；需结合容器重置、动态加载+构建时前缀、全局规则约束及第三方库定制等分层策略。
微前端里子应用的 CSS 不加约束，一定会污染主应用或其他子应用——这不是概率问题，是必然结果。qiankun、micro-app、wujie 等主流方案默认都不开样式沙箱，styledIsolation 或 scoped 之类配置只是“开关”，不是“银弹”，开了也不代表万事大吉。
qiankun 的 styledIsolation 配置到底起什么作用
它不改写选择器，也不自动加前缀，只控制样式挂载方式：
-
styledIsolation: true：启用「动态样式表隔离」，用CSSStyleSheet+adoptedStyleSheets把子应用样式注入到其容器元素的shadowRoot（如果存在）或独立标签中；但前提是子应用 DOM 必须挂在一个带 shadow 的容器下，否则仍走全局 -
styledIsolation: { strictStyleIsolation: true }：强制创建shadowRoot并把整个子应用根节点塞进去，样式天然隔离；但所有document.querySelector、getElementsByClassName等 API 在子应用内必须操作shadowRoot，否则查不到元素 - 不配置或设为
false：样式全扔进主文档，靠权重、加载顺序、手动命名空间（如.app-a-btn）硬扛，最不可靠也最容易漏
micro-app 的 scoped 模式为什么经常失效
它本质是 post-process：在子应用 HTML 加载后，遍历所有 标签，用哈希给每个 class 加前缀（如 .btn → .micro-app-a_btn_abc123），但以下情况完全绕过防护：
- 子应用用了
:global(.btn)（Vue SFC 中常见） - 写了内联
style="color: red"—— scoped 不处理内联样式 - 用了
@import或link[rel="stylesheet"]引入外部 CSS —— micro-app 默认不劫持这些请求，样式直接进全局 - 用了 CSS 变量（
--primary-color）、@font-face、@keyframes—— 这些都是全局注册，加前缀无效
真正能落地的样式沙箱组合策略
单靠框架配置撑不起生产环境，必须分层防御：
- 主应用容器上加
all: initial，切断字体、颜色、行高、margin 等继承链，避免子应用意外透传影响主应用排版 - 禁用子应用的
，改用 JS 动态加载，并用postcss-prefix-selector插件重写所有规则（如把.btn→.micro-app-a .btn），再注入到子应用容器内 - 约定所有子应用禁止使用
:global、禁止定义全局 CSS 变量、禁止@font-face；字体和变量由主应用统一提供，通过shared或主题上下文下发 - 对第三方 UI 库（如 Ant Design、Element Plus）做构建时处理：用
babel-plugin-import+ 自定义样式前缀逻辑，确保引入的组件样式也被包裹
最常被忽略的一点：CSS 变量和 @keyframes 名称一旦被某个子应用注册，就全局可见，且无法被 Shadow DOM 或 class 前缀拦截。这类东西必须从源头管控，而不是等运行时补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
