styledIsolation不能解决样式污染，因为它仅控制<style>标签挂载位置，不改写选择器、不处理@import/<link>/CSS-in-JS，导致这些样式逃逸至全局head；Vite子应用默认不支持该配置，旧版Safari会降级为无隔离。
为什么直接开 styledIsolation 不能解决样式污染
因为 styledIsolation 只控制 <style> 标签挂载位置（比如放进 shadowRoot 或 head），不改写选择器本身。子应用里用 @import、<link rel="stylesheet">、CSS-in-JS 动态插入的样式，全都会逃逸到主文档 <head>，浏览器照常全局解析——你看到按钮颜色被覆盖，不是配置没生效，是它压根就没管这些。
常见错误现象：styledIsolation: true 开了，但 Bootstrap 的 .btn 还是把主应用的按钮样式冲掉了；控制台没报错，样式却悄悄失效。
-
styledIsolation: { strictStyleIsolation: true }强制用 Shadow DOM，但子应用所有document.querySelector都得改成shadowRoot.querySelector，否则查不到元素 - Vite 子应用默认不支持
experimentalStyleIsolation，开了也白开 - 旧版 Safari 不支持
CSSStyleSheet.adoptedStyleSheets，会直接降级为无隔离
Vite / Webpack 子应用 CSS 路径 404 怎么修
子应用构建产物里 <link href="/css/app.abc123.css"> 是绝对路径，但实际部署在 /subapp-order/css/app.abc123.css，结果就是样式加载失败 + 页面白屏。
必须让构建时生成的静态资源路径，和主应用注册子应用时传的 entry 完全一致（协议、域名、路径都要对）。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- Vite：配置
build.base，运行时判断：window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - Webpack：设置
publicPath为动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - 构建后务必检查 dist 目录下所有
<link href>的路径，确认与registerMicroApps中的entry字符串完全匹配
UI 库（Element Plus、Bootstrap）怎么加命名空间
给 <body> 加 class 没用，因为 Bootstrap 编译出的 CSS 里根本没有 .bootstrap-iso .btn 这种规则；Element Plus 的 .el-input__inner 和 Element UI 的同名类，靠加载顺序硬扛，必冲突。
真正有效的做法是重编译源码或显式传参：
- Element Plus：初始化时传
{ namespace: 'ep' }，类名变成ep-button；同步在 SCSS 中重定义$namespace变量，并通过css.preprocessorOptions.scss.additionalData全局注入 - Bootstrap：用 Sass 重编译，写成
.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }；JS 组件如Modal必须显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal')) - CSS Custom Properties（如
--bs-primary）不会被命名空间包裹，需单独处理或约定前缀
postcss-prefix-selector 和 Scoped CSS 在微前端里为什么经常失效
Scoped CSS（Vue 的 <style scoped>、CSS Modules）本质是属性选择器模拟，比如 .btn[data-v-f3f2d1]，但它防不住更高级别选择器（div .btn）、!important、或第三方库往 document.head 直接插 <style>。
常见踩坑点：
- 主应用引入了
normalize.css，子应用按钮边框被重置，scoped 根本拦不住 - Vite 子应用用了
postcss-modules，但css-loader的modules.auto没关，类名没哈希化，冲突照旧 - Vue 子应用启用了
scoped，父组件却用了::v-deep主动穿透，隔离形同虚设 -
css-loader的modules.mode必须设为'local'才生效，设成'pure'就跳过作用域处理
真正难的不是加前缀，而是第三方 CSS 和 JS 组件行为的联动——比如 Bootstrap 的 JS 插件只认原始类名，你加了前缀，它就找不到目标节点。这点容易被忽略，但一旦漏掉，样式看起来“隔离”了，功能却崩了。
