必须分层补位实现彻底隔离：编译时加前缀、运行时容器约束、主应用兜底重置；qiankun的strictstyleisolation无法拦截@import、css-in-js、外部link及字体动画；vite子应用需用postcss-prefix-selector改写类名并动态注入样式；ui框架须从源头配置命名空间；closed shadow dom是唯一真隔离，但要求所有渲染挂载到shadowroot且禁用document/window全局api。
不能靠单一配置开关实现“彻底隔离”，必须分层补位：编译时加前缀 + 运行时容器约束 + 主应用兜底重置。qiankun 的 styledIsolation 或 strictStyleIsolation 单独启用，几乎必然漏掉 @import、CSS-in-JS、第三方 <link rel="stylesheet"> 和字体/动画定义。
为什么 strictStyleIsolation: true 会失效
它只劫持动态插入的 <style></style> 和 <link rel="stylesheet">，但以下情况完全绕过：
-
@import规则在 CSS 文件内部，沙箱不解析嵌套内容 -
styled-components、emotion等库直接操作document.styleSheets或用insertRule，不走 DOM 插入流程 - 子应用构建时保留了
<link href="/css/bootstrap.css">，路径 404 后浏览器静默失败，样式没加载但控制台无报错 - 主应用已注入
normalize.css，子应用的button { margin: 0 }仍会被覆盖——沙箱不干预已有全局规则
Vite 子应用必须禁用 experimentalStyleIsolation
这个选项对 Vite 构建的子应用基本无效：Vite 的 CSS 是通过 import 'xxx.css' 走 ES 模块加载链，最终由 style 标签注入 head，qiankun 劫持不到该过程。
正确做法是：
- 在
postcss.config.js中配置postcss-prefix-selector，指定唯一前缀如.subapp-order - 移除所有
<link rel="stylesheet">，改用 JS 动态加载并注入到子应用容器内：container.appendChild(styleEl) - 设置
build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/'，确保产物中所有资源路径与主应用注册的entry一致
UI 框架类名必须从源头改写，不能只靠 CSS 前缀
Element Plus 的 el-button 和 Ant Design Vue 的 ant-btn 这类默认类名，即使加了容器前缀（如 .subapp-order .el-button），仍可能被后加载的同名规则覆盖——因为浏览器按选择器权重计算，而两个子应用都用了 el- 前缀，权重相同。
必须做三件事：
- 初始化时传入命名空间：
createApp(App).use(ElementPlus, { namespace: 'ep' })，生成ep-button类名 - 同步覆盖 SCSS 变量：新建
src/styles/element/index.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep') - 通过
vite.config.ts的css.preprocessorOptions.scss.additionalData全局注入该文件，确保所有组件样式都参与编译
Shadow DOM 不是银弹，但 closed 模式是唯一真隔离
只有 attachShadow({ mode: 'closed' }) 能切断层叠链，让子应用样式不参与主文档的 CSS 计算。但它带来硬性约束：
- 子应用所有渲染必须挂载到
shadowRoot，不能写入document.body；Vue 要用app.mount(shadowRoot)，React 要用createRoot(shadowRoot).render() - 第三方 UI 库（如 Element Plus）需显式指定挂载点：
new ElMessage({ appendTo: shadowRoot })，否则弹窗仍会进主文档 -
@font-face、@keyframes、CSS Custom Properties（如--bs-primary）不会继承，必须手动克隆注入到shadowRoot的<style></style>中
真正容易被忽略的是：一旦启用 closed Shadow DOM，子应用里所有 document.querySelector、window.addEventListener 都会失效——这不是 bug，是规范行为。你得接受它是一道墙，而不是一个可调试的容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
