子应用无法读取主应用 :root 变量是因 CSS 作用域隔离，需通过 document.documentElement.style.setProperty() 主动透传并加唯一前缀，如 --mf-order-header-bg，且须配合主题变更事件同步。
主应用的 :root 变量子应用根本读不到
这不是兼容性问题，是浏览器 CSS 作用域隔离的天然行为。qiankun 默认启用样式沙箱（experimentalStyleIsolation: true），会把子应用样式包裹进 shadowRoot 或加属性选择器隔离，导致子应用的 CSS 规则无法继承主应用 :root 上定义的变量。DevTools 里看到 var(--primary-color) 计算为 inherit 或 fallback 值，就是这个原因。
常见错误是以为“只要主应用写了 :root { --x: y }，子应用就能用”，结果子应用样式全退化到默认值。必须主动桥接，不能依赖自动继承。
透传变量必须走 document.documentElement.style.setProperty()
最可靠的方式，是在子应用挂载后、渲染前，把主应用当前计算出的变量值写入子应用自身的 documentElement。不是复制字符串，而是调用原生 API 注入：
const app = await loadMicroApp({ name: 'order', entry: '//subapp-order/' });
app.instance?.document?.documentElement?.style?.setProperty('--mf-order-header-bg', getComputedStyle(document.documentElement).getPropertyValue('--header-bg'));
关键点：
- 必须等主应用的
:root已完成计算（比如主题切换逻辑执行完毕），不能在DOMContentLoaded前读取 - 子应用内所有
var(--mf-order-header-bg)调用，必须带 fallback：color: var(--mf-order-header-bg, #1890ff) - 禁止在子应用自己的
:root中重复声明同名变量，否则会覆盖透传值
命名必须带子应用 ID 前缀，且禁用嵌套语义
统一管理不等于全局裸奔。--primary-color 这种泛化名在微前端里是高危信号——一旦两个子应用都设了它，谁后加载谁赢，且 DevTools 里完全看不出源头。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
正确格式是 --{app-id}-{semantic-name}，例如：
-
--mf-order-header-bg✅ -
--mf-user-profile-text-color✅ -
--mf-order-form-input--error-border❌（多余层级应由 BEM 类名控制） -
style="--primary-color: red"❌（禁止内联写，统一走setProperty）
建议配合 ESLint 插件校验，拦截漏加前缀的 --* 使用。
Shadow DOM 场景下变量不会自动穿透
如果子应用启用了 strictStyleIsolation 或手动使用 Shadow DOM，CSS 变量默认不会进入 shadow boundary。此时仅靠 setProperty 不够，还需显式透传：
- 在主应用中对子应用容器设置
inherit或initial继承策略：.subapp-container { --mf-order-header-bg: inherit; } - 或在子应用 shadowRoot 内第一层节点上手动设置：
shadowRoot.host.style.setProperty('--mf-order-header-bg', value)
最容易被忽略的是：变量透传和主题状态同步是两件事。CSS 变量本身不触发通知，主应用改了 --header-bg，子应用不会自动响应——得靠 CustomEvent('theme-change') 或状态管理中间件来驱动重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
