qiankun的styledIsolation不自动改写选择器或加前缀，仅控制样式挂载方式：true时依赖shadowRoot存在否则仍入全局head；strictStyleIsolation强制shadowRoot但要求DOM操作限定在shadow内；未配置则全入head靠权重硬扛，易漏。
子应用 CSS 不能靠“加个配置就自动隔离”，必须主动控制加载时机、作用域和注入位置——否则污染是必然的，不是可能的。
qiankun 的 styledIsolation 到底管不管用
它只控制样式挂载方式，不改写选择器、不加前缀、不拦截外部请求：
-
styledIsolation: true：把子应用的<style>插入到其容器元素的shadowRoot（如果存在），否则仍扔进全局<head> -
styledIsolation: { strictStyleIsolation: true }：强制创建shadowRoot并把整个子应用根节点塞进去；但所有document.querySelector、getComputedStyle在子应用内必须操作shadowRoot，否则查不到元素 - 不配置或设为
false：样式全进主文档<head>，靠加载顺序和权重硬扛，极易漏
常见失效场景：@import 嵌套的 CSS、<link rel="stylesheet">、CSS-in-JS 动态生成的 <style> 标签，都不在劫持范围内。
micro-app 的 scoped 模式为什么总失效
它只是对已加载的 <style> 标签做 post-process 哈希加前缀（如 .btn → .micro-app-a_btn_abc123），但以下情况完全绕过：
立即学习“前端免费学习笔记（深入）”；
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
:global(.btn)（Vue SFC 中常见） - 内联样式：
style="color: red"—— scoped 不处理 - 外部 CSS：
<link rel="stylesheet">或@import—— 默认不劫持请求 - CSS 变量（
--primary-color）、@font-face、@keyframes—— 全局注册，加前缀无效
本质问题：scoped 是属性选择器模拟，防不住更高级别选择器覆盖，也拦不住第三方库往 document.head 直接 append。
真正能落地的运行时隔离组合策略
单靠框架开关撑不起生产环境，必须分层补位：
- 主应用容器上加
all: initial，切断字体、颜色、行高、margin 等继承链，防止子应用意外透传影响主应用排版 - 禁用子应用的
<link rel="stylesheet">，改用 JS 动态加载，并用postcss-prefix-selector重写所有规则（如.btn → .micro-app-a .btn），再注入到子应用容器内 - 约定子应用禁止使用
:global、禁止定义全局 CSS 变量、禁止@font-face；字体和变量由主应用统一提供，通过 shared 或主题上下文下发 - 对 UI 框架（如 Element Plus）启用命名空间：在
app.use(ElementPlus, { namespace: 'ep' })后，还需同步修改 SCSS 编译变量，否则组件类名和样式规则不匹配
关键细节：Webpack 的 css-loader 必须设 modules.mode: 'local' 才生效；设成 'pure' 会跳过作用域处理。
Shadow DOM 整体封装子应用的代价与陷阱
虽然能天然隔离样式，但实际项目中要面对一连串现实问题：
-
document.querySelector、getElementsByClassName在子应用内全部失效，除非手动切到shadowRoot -
@font-face和@keyframes无法跨 Shadow Boundary 加载，需手动克隆注入 - CSS 变量继承中断，
:host-context()会穿透边界，破坏隔离性 - 第三方 UI 库（如 Ant Design、Element Plus）默认不兼容 Shadow DOM，需额外适配渲染逻辑
最常被忽略的一点：Shadow DOM 对 <slot> 内容不提供样式保护，外部 CSS 仍可影响插槽内容，必须配合 all: initial 重置。
