子应用读不到主应用的:root变量是因微前端样式隔离机制导致CSS作用域不跨document或shadow boundary，属浏览器原生行为而非配置错误；需通过主动注入style.setProperty、统一加载variables.css或动态patch<style>等方式透传，并强制规范命名与fallback。
CSS变量无法跨子应用自动共享，这是微前端的隔离机制决定的，不是配置遗漏或写法错误。
为什么子应用读不到主应用的 :root 变量
微前端框架（如 qiankun）默认启用样式沙箱，会将子应用样式包裹进 Shadow DOM 或添加属性选择器隔离。这意味着子应用的 document 与主应用不共享同一 CSS 作用域 —— 即使主应用在 :root 上定义了 --color-primary，子应用的 var(--color-primary) 也会 fallback 到 inherit 或初始值，DevTools 里显示“unresolved”。这不是兼容性问题，是浏览器原生行为：CSS 自定义属性不跨 document 或 shadow boundary。
- iframe 加载的子应用完全隔离，
document.documentElement是独立对象 - qiankun 的
experimentalStyleIsolation: true（默认）会阻止继承链穿透 - single-spa 等无沙箱模式的框架，虽能读到变量，但存在样式污染风险（比如子应用改
body规则影响全局）
安全透传变量的三种实操方式
核心原则是：让子应用的 documentElement 能访问到同一份变量声明，而非复制值或拼字符串。
-
推荐：主应用主动注入
style.setProperty—— 在子应用挂载后、渲染前执行：app.instance?.document?.documentElement?.style?.setProperty('--mf-admin-bg', getComputedStyle(document.documentElement).getPropertyValue('--mf-admin-bg'));注意必须等主应用变量已计算（主题切换完成），且不能在DOMContentLoaded前读取 -
备选：关闭样式沙箱 + 统一加载 variables.css —— 设
experimentalStyleIsolation: false，同时确保所有子应用和主应用都通过<link rel="stylesheet" href="/css/variables.css">加载同一份文件（禁止@import）；该文件只含:root { --x: y; }，无其他规则 -
慎用：动态 patch 子应用
<style>标签 —— 若子应用以 script 方式加载，可在其<head>插入含:root声明的<style>，但需确保插入时机早于子应用 CSS 解析，且避免重复插入
变量命名与 fallback 必须强制规范
即使透传成功，不规范的命名和缺失 fallback 仍会导致样式错乱，尤其在子应用未加载完成或 JS 执行失败时。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 变量名必须带应用前缀：
--mf-order-header-bg，禁用--header-bg这类泛化名；否则多个子应用同时设置同名变量会相互覆盖 -
var()调用必须带 fallback：color: var(--mf-order-text-color, #333);—— 拼写错误、加载延迟、JS 报错都会导致静默退化，不加 fallback 就等于放弃容错 - 禁止嵌套 fallback：
var(--a, var(--b))，旧版 Safari 不支持；fallback 值类型必须合法（如color: var(--c, red)可，color: var(--c, 0)不可） - 单位必须显式写出：
--space-md: 16px;，调用时不能写padding: var(--space-md)px
Shadow DOM 和主题切换的特殊处理
如果子应用内部用了 Shadow DOM（如 Web Components），或需要支持深色主题切换，仅透传变量还不够。
- Shadow DOM 默认不继承
:root变量，需在 host 元素上显式透传：:host { --mf-order-bg: var(--mf-order-bg); }或用inherit关键字 - 主题切换别只靠 JS 改变量值 —— 那样无法触发基于 class 的条件样式（如图标反色、禁用态透明度）。正确做法是统一用
document.documentElement.classList.toggle('theme-dark')，再配合 CSS 规则：.theme-dark :root { --mf-order-bg: #1a1a1a; } - localStorage 持久化主题后，首屏 JS 未执行前变量仍是默认值，必须靠 HTML class 预设（如服务端渲染时写入
<html class="theme-dark">）
最易被忽略的是状态同步 —— CSS 变量透传只解决“值可见”，不解决“变更通知”。主应用切主题后，子应用不会自动响应，必须额外设计事件机制（如 dispatchEvent(new CustomEvent('theme-change'))）或状态管理桥接。否则，一个子应用改了变量，其他子应用依然用旧值。
