qiankun的experimentalStyleIsolation常失效，因其仅劫持初始标签，不处理@import、、JS动态插入样式及内联样式；且依赖容器手动添加data-qiankun属性，否则前缀规则不匹配。
微前端中子应用的 CSS 隔离不是开个配置就能自动生效的事，experimentalStyleIsolation 和 strictStyleIsolation 各有硬伤，真正能落地的方案必须分层处理：容器结构、构建时类名控制、UI 框架定制、资源路径对齐，缺一不可。
qiankun 的 experimentalStyleIsolation 为什么经常失效
它只劫持子应用初始加载的 <style></style> 标签，对以下情况完全无感：
-
@import嵌套的 CSS 文件（比如@import 'element-plus/theme-chalk/index.css'） -
<link rel="stylesheet">引入的外部样式表 - 运行时 JS 动态插入的
<style></style>（如 Modal、Tooltip 的 portal 渲染） -
:global()、style="..."内联样式、CSS 变量（--el-color-primary）
更关键的是：它不改写选择器，只是给每个规则加 [data-qiankun="xxx"] 属性前缀。如果子应用挂载点是 <div id="subapp"></div>，但没手动给它加上这个属性，那所有规则都匹配失败——样式压根不会生效。
子应用 UI 框架（如 ElementPlus）必须重命名空间
ElementUI 和 ElementPlus 共存时，.el-input__inner 这种共享前缀类名必然冲突。靠沙箱“罩住”没用，因为它们的 CSS 是独立加载进 document.head 的，不受 qiankun 劫持范围覆盖。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- 在子应用
main.ts初始化时传入{ namespace: 'ep' }，让组件类名变成ep-button、ep-input - 新建
src/styles/element/index.scss，内容为：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - Vite 用户需在
css.preprocessorOptions.scss.additionalData中注入该文件；Webpack 用户配sass-loader.additionalData - 漏掉任意一步，
ep-前缀就不会出现在最终 CSS 中
第三方全局 CSS（如 Bootstrap、normalize.css）必须重编译嵌套
给 加 class="bootstrap-iso" 没用——原始 Bootstrap 的 CSS 里根本没有 .bootstrap-iso .btn 这种规则，浏览器根本不会匹配。
- 正确做法：用 Sass 重编译源码，在顶层包裹命名空间块：
.bootstrap-iso { @import "bootstrap/scss/bootstrap"; } - Bootstrap 的 JS 组件（Modal、Dropdown）默认只认
.modal、.dropdown-menu，必须显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal')) - 主应用应统一提供基础样式（如 normalize.css、字体），子应用禁用所有
import 'xxx.css'，避免重复加载和顺序竞争
Less / CSS Modules 类名哈希必须满足两个硬条件
很多人以为写个 .micro-app { .button { } } 就算隔离了，其实这只是视觉欺骗。Less 编译后生成的是 .micro-app .button，但这条规则是否生效，取决于 DOM 中是否存在对应容器节点，且该节点是否被正确挂载。
- 文件名必须是
Button.module.less（不是Button.less），否则css-loader默认不启用 modules 模式 - Webpack 配置中
css-loader.modules.auto必须设为true或显式匹配/\.module\.(less|css)$/ - Vite 用户还需在
css.preprocessorOptions.less.additionalData中注入全局变量，否则@import (reference)会失效，导致变量重复编译 - 漏掉任一条件，JS 中
styles.button拿到的就是原始字符串"button"，最终渲染为className="button"上全局
最易被忽略的一点：所有动态挂载到 document.body 的 DOM（如 Modal、Tooltip、Select 下拉框），都会脱离容器作用域，导致带前缀的样式规则无法命中——这类组件必须通过 getPopupContainer 或类似 API 显式挂载回子应用根节点内。
