必须从构建时用postcss重写第三方css选择器并包裹进子应用容器作用域，配合运行时dom劫持和shadow dom封闭模式，才能彻底隔离微前端中第三方浮动样式。
第三方浮动样式（比如 button、h1、* { margin: 0 }）会直接作用于整个 document，微前端里只要子应用引入了这类 CSS，主应用和其他子应用的原生标签就全被改掉——这不是“冲突”，是“接管”。必须从加载源头掐断。
为什么 scoped 和 css-modules 对第三方浮动样式完全无效
scoped 只处理单文件组件里的 <style></style> 块；css-modules 只哈希你显式 import 的模块化 CSS。而第三方库（如 Bootstrap、Normalize.css、Arco Design 的基础 reset）往往通过 import 'xxx.css' 或 <link rel="stylesheet"> 注入，走的是全局路径，构建工具根本不会给它们加属性选择器或哈希类名。
常见现象包括：body 行高突变、button 圆角消失、input 边框被重置、.container 宽度被撑满——这些都不是你写的代码出问题，是第三方 CSS 的全局规则生效了。
- Vue 的
<style scoped></style>对node_modules里 import 进来的 CSS 零作用 - qiankun 的
strictStyleIsolation不拦截@import嵌套或document.write注入的样式 - Vite 的
experimentalStyleIsolation在子应用用import 'xxx.css'时压根不生效
必须在构建时重写所有选择器，且覆盖原生标签
PostCSS 是唯一能统一处理所有 CSS 文件（含 node_modules）的环节。关键不是只加前缀，而是把 button、h1、* 这类浮动选择器也裹进容器作用域。
以 postcss-prefix-selector 为例，在子应用的 postcss.config.js 中配置：
module.exports = {
plugins: [
require('postcss-prefix-selector')({
prefix: '.subapp-credit', // 必须是带点的 class 选择器
exclude: [/^html$/, /^body$/], // 避免污染 html/body 全局结构
includeFiles: [/\.css$/, /node_modules\/arco-design/]
})
]
}
效果是：button { padding: 4px } → .subapp-credit button { padding: 4px }，* { box-sizing: border-box } → .subapp-credit * { box-sizing: border-box }。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 不能只配
prefix: 'subapp-credit'（漏掉点号会导致生成非法选择器） -
exclude必须显式排除html和body，否则可能破坏主应用布局 -
includeFiles要覆盖node_modules，否则第三方库的 CSS 文件不会被处理
动态插入的浮动样式（如弹窗、下拉）必须劫持到容器内
Element Plus 的 el-date-picker、Ant Design 的 Modal 会把 DOM 插到 document.body，此时即使你重写了 CSS，样式规则也没法匹配——因为 .subapp-credit button 不会匹配 body 下的 button。
解决方案分两步：
- 子应用启动时，用
document.body = { appendChild(el) { container.appendChild(el) } }临时劫持（qiankun 沙箱已提供该能力，确认启用sandbox: { strictStyleIsolation: true }） - 对 UI 库做适配：Element Plus 传
popperAppendToBody: false，Arco Design 配getPopupContainer: () => container - 禁用子应用里所有
document.write和直接innerHTML注入样式的操作
验证方式：打开 DevTools，搜索 .subapp-credit，确保所有 CSS 规则都含该前缀，且 document.body 下看不到未加前缀的第三方浮动样式规则。
Shadow DOM 是唯一兜底方案，但必须用 mode: 'closed'
当构建时重写 + 运行时劫持仍漏掉某些动态样式（比如第三方库内部用 document.styleSheets 动态创建 style 标签），就得上 Shadow DOM。它不依赖任何构建配置，浏览器原生切断层叠链。
关键点只有三个：
- 容器元素必须干净：
<div id="subapp-root"></div>，不能带 class 或 inline style - 挂载必须用
attachShadow({ mode: 'closed' })，open模式下外部脚本仍可读取和修改 shadowRoot，等于白搭 - 所有资源（
<link>、<script></script>、HTML 结构）必须全部 append 到shadowRoot，而不是document.head或document.body
注意：React/Vue 默认不支持挂载到 shadowRoot，Vue 需设 createApp(App).mount(shadowRoot)，React 需用 createRoot(shadowRoot).render()。一旦用了 closed Shadow DOM，document.querySelector、getComputedStyle 就再也拿不到内部节点——这是隔离的代价，也是它真正可靠的原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
