CSS变量无法自动沙箱隔离，必须通过作用域树设计与显式继承控制；strictStyleIsolation对CSS变量无效，因Shadow DOM不阻断JS修改document.documentElement，且CSS变量不穿透边界。
CSS变量无法靠沙箱自动隔离，必须靠作用域树设计+显式继承控制——这是微前端里最常被误判的“伪隔离”陷阱。
为什么strictStyleIsolation对CSS变量完全无效
qiankun 的 strictStyleIsolation: true 会强制子应用挂载到 Shadow DOM，但 CSS 自定义属性（--color-primary）默认不穿透 Shadow Boundary。结果是：子应用内所有 var(--color-primary) 全部退化为 fallback 值，样式大面积丢失。
更关键的是，它根本不管 :root 声明本身——只要子应用执行了 document.documentElement.style.setProperty('--color-primary', '#ff5722')，主应用的 :root 就被直接污染，且不可逆。
- Shadow DOM 不会阻止 JS 修改
document.documentElement，只阻断样式继承路径 -
@import、link加载的 CSS 文件中若含:root { --x: y }，仍会全局生效 - micro-app 的
scoped模式对 CSS 变量零作用，因为它只处理类名哈希，不重写:root
共享必须走:root，但要加命名空间前缀
所有子应用能读取变量的唯一可靠位置是 :root，但不能裸写 :root { --color-primary: #2563eb }——这等于主动开炮。正确做法是用命名空间限定作用域：
立即学习“前端免费学习笔记（深入）”；
/* 主应用统一注入 */
:root {
--host-color-primary: #2563eb;
--host-spacing-md: 12px;
}
<p>/<em> 子应用 A 显式继承并扩展 </em>/
:root {
--app-a-color-primary: var(--host-color-primary);
--app-a-font-size: 14px;
}这样既保证继承链完整，又避免覆盖冲突。注意：var(--host-color-primary) 必须带 fallback，否则子应用未加载主应用变量时直接失效：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
-
color: var(--app-a-color-primary, #2563eb);✅ -
color: var(--app-a-color-primary);❌（退化为 inherit，视觉错乱）
子应用如何安全声明私有变量而不污染全局
子应用绝不能在 :root 直接覆盖同名变量，而应绑定到自身容器节点上，再靠 inherit 向下透传：
/* 子应用根容器加唯一 data 属性 */
<div id="subapp-viewport" data-app="order"></div><p>/<em> 在子应用样式中 </em>/
[data-app="order"] {
--order-color-primary: #ff5722;
--order-bg: #f9fafb;
}</p><p>[data-app="order"] <em> {
/</em> 强制继承，确保子元素能读到 */
color: inherit;
background-color: inherit;
}</p><p>.order-card {
color: var(--order-color-primary);
background-color: var(--order-bg);
}这种方式绕开了 :root 污染，又保留了变量复用能力。但要注意：
- 必须给容器加
data-app这类不可预测的属性，不能用.order类名——CSS-in-JS 或第三方库可能动态增删 class - SVG、
::before/::after默认不继承自定义属性，需显式写color: inherit或content: var(--x) - 如果子应用用了 Portal 挂载弹窗到
body，需手动把变量从容器复制过去：document.body.style.setProperty('--order-color-primary', '...')
主题切换时别用setProperty遍历改变量
运行时逐个调用 document.documentElement.style.setProperty() 改变量，会导致多次 layout thrashing，且无法利用 CSS 级联优先级做局部覆盖（比如某个弹窗强制浅色背景）。
真正可落地的做法是预设主题 class：
<html class="theme-dark">
<!-- 主应用 CSS -->
.theme-dark {
--host-color-primary: #3b82f6;
--host-bg: #111827;
}
.theme-light {
--host-color-primary: #2563eb;
--host-bg: #ffffff;
}子应用通过监听 html class 变化来响应主题，而不是自己维护变量状态。这对跨技术栈（React + Vue）尤其关键——变量值同步靠 DOM class，不依赖 JS 状态通信。
最容易被忽略的一点：CSS 变量本身不触发重绘，但 html class 切换会触发整棵树的样式重计算。所以变量定义要精简，避免在 :root 堆几十个仅用于过渡动画的临时变量。
