qiankun的styledIsolation仅控制<style>挂载位置，不改写选择器、不处理@import/<link>/CSS-in-JS，导致这些样式逃逸至全局head；Vite子应用需禁用CSS提取并动态注入style标签，UI框架须加命名空间，Shadow DOM虽原生隔离但代价高且不拦截CSS变量等全局规则。
做不到“彻底”隔离，但能逼近零污染——关键不是开某个开关，而是切断 CSS 的全局生效路径。
qiankun 的 styledIsolation 为什么开了也没用
它只管 <style> 标签挂到哪（shadowRoot 还是 <head>），不管选择器本身长什么样。以下三类样式完全逃逸：
-
@import嵌套的 CSS 文件，qiankun 不解析、不重写 -
<link rel="stylesheet">加载的外部 CSS，直接进<head> - CSS-in-JS（如
styled-components）动态生成的<style>，走的是 JS 插入逻辑，劫持不到
现象：开了 styledIsolation: true，但子应用引入的 bootstrap.css 依然把主应用的按钮样式冲掉——这不是配置失效，是它压根没管这行 <link>。
Vite 子应用必须禁用 <link>，改用 JS 动态注入
Vite 默认把 CSS 打包成独立文件并生成 <link href="/css/app.xxx.css">，而微前端部署路径通常是 /subapp-order/css/app.xxx.css，结果就是 404 + 样式白屏。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 在
vite.config.ts中关闭 CSS 提取：build.cssCodeSplit: false，让所有样式打进 JS - 移除所有
import './index.css'，改用import('./index.css').then(...)动态加载 - 加载后手动创建
<style>标签，textContent = cssText，再container.appendChild(styleEl) - 确保
container是子应用挂载点（非document.body），且该容器已带唯一前缀 class（如class="subapp-order"）
UI 框架类名必须加命名空间，不能只靠 CSS 隔离
Element Plus 的 .el-input__inner 和 Ant Design Vue 的 .ant-btn 是静态类名，沙箱不改 DOM，也不重写第三方库输出的 HTML —— 后加载的子应用直接覆盖先加载的。
- Element Plus：初始化时传
{ namespace: 'ep' }，让组件输出ep-input、ep-button - Ant Design Vue：用
ConfigProvider设置prefixCls="my-ant" - 同步修改 SCSS 变量：新建
src/styles/element-namespace.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep');，再通过css.preprocessorOptions.scss.additionalData全局注入 - 构建后检查产物 HTML 和 CSS，确认
.ep-input真实存在，而非仍为.el-input
Shadow DOM 是唯一原生隔离方案，但代价极高
它真能切断层叠链，但要求子应用彻底重构渲染入口：
- Vue 必须
createApp(App).mount(shadowRoot)，不能 mount 到document.body - React 必须
createRoot(shadowRoot).render(...) - 所有
document.querySelector、getComputedStyle都得改成shadowRoot.querySelector - 第三方 JS 组件（如 Bootstrap Modal）必须显式传入带前缀的选择器：
new Modal(document.querySelector('.subapp-order .modal')) - 旧版 Safari 不支持
CSSStyleSheet.adoptedStyleSheets，会降级为无隔离；closed模式下 DevTools 无法 inspect 内部结构
最常被忽略的一点：CSS Custom Properties（如 --bs-primary）、@font-face、@keyframes 全局注册，Shadow DOM 也拦不住——它们天生跨边界。
