微前端下子应用无法使用主应用:root变量，因CSS作用域不跨document或shadow boundary；需通过关闭样式沙箱、主动注入documentElement.style或统一加载CSS文件等方式透传，并始终提供fallback值。
主应用定义的 :root 变量为什么子应用里用不了
微前端下，子应用通常以 iframe 或动态 script 加载，CSS 作用域天然隔离。即使主应用在 :root 上声明了 --primary-color，子应用的样式表不会自动继承这些变量——浏览器 CSS 作用域不跨 document（iframe）或不跨 shadow boundary（沙箱环境），更不会跨 JS 执行上下文。
常见错误现象：color: var(--primary-color) 在子应用中计算为 inherit 或 fallback 值，DevTools 里能看到变量未解析；或者子应用自己也写了同名变量但值不同，造成视觉不一致。
- 使用场景：主应用统一管理主题色、间距、圆角等设计 token，子应用需复用而非硬编码
- 不是所有微前端框架都默认透传，比如
qiankun的沙箱模式会隔离document，single-spa则依赖手动注入 - 透传本质是「让子应用的
document能访问到同一份:root声明」，而不是复制变量值
qiankun 子应用如何读取主应用的 CSS 变量
qiankun 默认启用样式沙箱（experimentalStyleIsolation: true），会把子应用样式包裹进 shadow DOM 或加属性选择器隔离，导致无法访问主应用 :root。必须关闭隔离或主动桥接。
- 关闭样式沙箱：在
registerMicroApps中设experimentalStyleIsolation: false，但注意这会让子应用样式可能污染全局，尤其含body、html规则时 - 更安全的做法：主应用在挂载子应用前，把变量写入子应用的
document.documentElement.style，例如：const app = await loadMicroApp({ name: 'sub', entry: '//sub/' });<br>app.instance?.document?.documentElement?.style?.setProperty('--primary-color', getComputedStyle(document.documentElement).getPropertyValue('--primary-color')); - 注意时机：必须等主应用
:root已渲染且变量已计算（比如主题切换后），不能在DOMContentLoaded前读取
子应用内如何安全使用透传来的 CSS 变量
即使变量已写入子应用 documentElement，直接写 var(--primary-color) 仍有风险——如果主应用没定义、或子应用加载早于主应用设置，就会 fallback 失效。
立即学习“前端免费学习笔记（深入）”；
- 始终提供 fallback 值：
color: var(--primary-color, #1890ff)，别省略第二个参数 - 避免在子应用
:root中重复声明同名变量，否则会覆盖透传值；如需局部覆盖，用更具体的选择器，比如.sub-app :root - 动态主题切换时，主应用需重新触发透传逻辑（比如监听
customEvent或通过props通知子应用更新documentElement.style） - 不要依赖 JS 获取变量值再 setStyle：CSS 变量的级联和继承是纯 CSS 行为，JS 注入只是初始化手段，后续变更仍需同步
非 qiankun 场景（如 iframe 或 import-map）怎么处理
iframe 是完全独立的 document，:root 变量无法穿透。import-map 本身不解决样式问题，只管模块加载。
- iframe 方案：主应用通过
postMessage把变量 JSON 发给子 iframe，子应用监听后执行document.documentElement.style.cssText += ...；但要注意 CSP 限制style-src - import-map + 模块化 CSS：把变量抽成独立 CSS 文件（如
tokens.css），主子应用都通过<link rel="stylesheet">加载同一份，确保来源一致 - 兼容性影响：CSS 变量本身支持 IE11 以外所有现代浏览器，但
cssText批量注入在某些低版本 Safari 下有渲染延迟，建议单条setProperty
真正麻烦的不是透传动作本身，而是变量生命周期管理——谁负责更新、何时失效、fallback 是否合理。很多团队卡在这一步，不是技术做不到，是没想清楚变量到底属于谁、该由谁维护。
