micro-app 的 scoped 模式失效，因其仅对静态 <style> 标签做哈希前缀处理，无法覆盖 :global()、内联样式、外部 CSS、CSS 变量、动态注入样式及第三方库直插 document.head 等场景；真正隔离需用 Shadow DOM + namespace 改写 + 手动拦截样式注入。
micro-app 的 scoped 模式为什么总失效
它只是对已加载的 <style> 标签做 post-process 哈希加前缀（如 .btn → .micro-app-a_btn_abc123），但以下情况完全绕过：
-
:global(.btn)（Vue SFC 中常见） - 内联样式：
style="color: red"—— scoped 不处理 - 外部 CSS：
<link rel="stylesheet">或@import—— 默认不劫持请求 - CSS 变量（
--primary-color）、@font-face、@keyframes—— 全局注册，加前缀无效
本质问题：scoped 是属性选择器模拟，防不住更高级别选择器覆盖，也拦不住第三方库往 document.head 直接 append。
子应用 CSS 必须主动控制注入位置，不能依赖自动劫持
micro-app 的隔离逻辑只拦截静态 <style> 标签内容，对运行时动态插入的样式无感知。Element Plus、Ant Design 等 UI 库初始化时会自己执行 document.head.appendChild(stylesheet)，这一步根本不在 micro-app 的沙箱拦截范围内。
- 必须在子应用入口处手动拦截所有样式注入行为，例如重写
document.head.appendChild，检测是否为子应用创建的<style>，再调用scopedCSS(styleEl, 'app-name') - 对
<link rel="stylesheet">，需提前捕获并转为 fetch +insertRule注入到容器内，而非让浏览器默认加载进全局head - Vite 子应用尤其危险：
import './index.css'会走 Vite 的 HMR 注入路径，绕过 micro-app 所有钩子
真正能切断层叠链的只有 Shadow DOM
浏览器对同一 document 内所有 CSS 统一计算优先级，scoped、modules、prefix 都只是“降低冲突概率”，只有 Shadow DOM 能真正隔离作用域——它的样式表不参与主文档的层叠计算。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 必须用
mode: 'closed'：attachShadow({ mode: 'closed' })才能阻止外部脚本访问shadowRoot，open模式等于没隔离 - 子应用渲染目标必须是
shadowRoot：React 用createRoot(shadowRoot).render()，Vue 用createApp(App).mount(shadowRoot)，绝不能挂载到document.body - 动态样式注入要手动：不能靠
<link rel="stylesheet">直接扔进shadowRoot，需用const style = document.createElement('style')+style.textContent = rewrittenCSS+shadowRoot.appendChild(style)
第三方 UI 库必须改 namespace，不能只靠隔离配置
直接复用默认类名（如 el-button、ant-btn）是微前端样式污染的高发源头——两个子应用都引入同一套组件库，后加载的 CSS 会覆盖先加载的，且沙箱完全不拦截这类静态类名规则。
- Vue 项目：在
main.ts初始化时传入{ namespace: 'ep' }（Element Plus）或{ prefixCls: 'my-ant' }（Ant Design Vue） - 同步改写 SCSS 变量：新建
element-namespace.scss，用@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep')覆盖变量 - 构建后检查产物：确认
.ep-button、.my-ant-btn类名真实出现在 HTML 和 CSS 中，而非仍为原始类名 - Bootstrap 等需重编译：不能只给
<body>加 class，必须用 Sass 嵌套重编译源码，例如.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }
最关键的一点：micro-app 的 scoped 模式不会改写第三方库 JS 代码中硬编码的选择器（比如 document.querySelector('.modal')），这些查询会失败，除非你同时把 JS 初始化逻辑也适配到 shadowRoot 上下文里。这不是配置开关能解决的，是架构层面的耦合点。
