qiankun 的 styledisolation: true 仅隔离标准 style/link 标签，对 js 拼接、@import、css-in-js 无效；推荐主应用用 scoped 模式（strictstyleisolation: false），子应用构建加 class 前缀、禁用全局 reset、ui 库样式需重写变量与选择器作用域。
qiankun 的 styledIsolation 配置怎么用才不漏样式
开 styledIsolation: true 不等于样式就安全了——它只对通过标准方式注入的 <style></style> 和 <link rel="stylesheet"> 生效，对 JS 拼接字符串插入、@import 嵌套、CSS-in-JS 动态生成的 style 标签完全无感。
实际项目中建议这样配：
- 主应用启用
styledIsolation: { strictStyleIsolation: false }（即默认 scoped 模式），避免强制 Shadow DOM 带来的兼容性和第三方库适配问题 - 子应用构建时用
postcss-prefix-selector或css-loader的modules.localIdentName加前缀，比如.btn→.app-order-btn - 禁用子应用的全局 reset/normalize.css；主应用统一提供 scoped 版本，例如
.main-app-container * { margin: 0; } - 若子应用用了
styled-components，需配合StyleSheetManager+target指向沙箱容器节点，否则样式直接落
micro-app 下的 scoped 模式为什么还是串样式
micro-app 默认的 scoped 是靠 class 名哈希化模拟隔离，本质仍是全局 CSS，一旦子应用写了 :global(.header)、body { font-size: 14px } 或内联 style="color:red"，立刻穿透。
要堵住这些口子，得主动干预：
- 子应用构建阶段用 PostCSS 插件剥离所有
:global()语法，或改用:deep()显式透出 - 拦截子应用运行时的
document.write、innerHTML、insertAdjacentHTML调用，重写其中的 class 名 - 禁止子应用访问
document.styleSheets，micro-app 的strictStyleIsolation模式会清空该属性，但需确认子应用没缓存旧引用 - 字体图标（如 iconfont）必须用
symbol方式引入，并确保<use></use>的xlink:href指向沙箱内注册的 symbol ID
Arco Design / Ant Design 等组件库如何加命名空间
这类 UI 库的样式泄漏不是因为没加前缀，而是它们大量依赖全局 CSS 变量（--color-primary）、基础选择器（button、input）和未封装的动画 keyframes —— 这些根本不会被常规前缀逻辑处理。
推荐两条路：
- 用官方插件：比如
@arco-plugins/vite-vue配置componentPrefix: "finance-arco"，它不仅改标签名，还会重写 less 中的变量作用域和 keyframes 名称 - 手动接管主题：子应用加载前，动态注入 scoped 版本的 theme css，例如把
:root { --color-primary: #1890ff; }改成.app-arco-container :root { --color-primary: #1890ff; }，再用CSSStyleSheet.replace()替换生效 - 禁用子应用的
injectGlobal或createGlobalStyle，这类调用必须在沙箱容器内执行，否则变量污染全局
Shadow DOM 是不是终极解？别急着上
Shadow DOM 确实能天然隔离样式，但代价是：Vue/React 默认渲染到 document.body，不改入口就进不了 shadowRoot；第三方库（如 Element Plus 的 el-popper）弹层仍会挂到 body 外部，样式照漏。
真要用，必须满足三个硬条件：
- 子应用框架支持 shadowRoot 挂载：Vue 用
createApp(...).mount(shadowRoot)，React 用createRoot(shadowRoot).render(...) - 所有
document.querySelector、getComputedStyle、window.getComputedStyle调用，全部重定向到shadowRoot实例 - 关闭
adoptedStyleSheets的自动注入，改用shadowRoot.adoptedStyleSheets = [sheet]显式绑定，否则 Safari 16.4 以下版本直接失效
多数业务子应用改造成本远高于收益，真正稳的路径还是编译时 + 运行时双控：构建加前缀、加载劫持、DOM 监听补漏——漏点永远存在，关键是你是否知道它在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
