CSS变量不跨iframe继承是浏览器设计的隔离机制；同源时需通过load事件监听+动态注入style或setProperty实现；跨域时只能用postMessage通信并由子页自行设置。
CSS变量（--my-var）在iframe中完全不继承、不共享，这不是bug，而是浏览器设计的必然隔离行为。
每个iframe都有独立的document和样式作用域
CSS变量只在它被定义的document内生效。父页面设置document.documentElement.style.setProperty('--color', 'red')，只影响自身根元素；子iframe的documentElement是另一个完全独立的对象，内存地址不同、样式表不互通、计算上下文不共享。
即使同源，也不存在“CSS变量穿透”机制——浏览器没有提供任何原生路径让:root变量跨document边界传播。
- 子iframe未加载完成时，
iframe.contentDocument为null，直接操作会报错 - 子iframe内部没声明
:root { --color: ... }，或没在CSS里用var(--color)引用，设了也无视觉效果 - 用
innerHTML往子iframe写<style></style>有XSS风险，应优先用textContent + createElement
同源时安全注入CSS变量的实操方式
必须通过JS把变量“写进”子iframe内部的样式系统，而不是指望继承。
立即学习“前端免费学习笔记（深入）”；
关键步骤：
- 监听
iframe的load事件，确保contentDocument可访问 - 在子iframe的
中动态插入<style></style>标签，显式定义:root变量 - 若子页面已含
:root，可用iframe.contentDocument.documentElement.style.setProperty()更新（仅限同源）
示例代码：
const style = iframe.contentDocument.createElement('style');
style.textContent = ':root { --primary: #007bff; }';
iframe.contentDocument.head.appendChild(style);
跨域时唯一可行路径是postMessage + 手动应用
跨域时iframe.contentDocument不可读，postMessage是唯一标准通信通道。
不能传样式，只能传数据：
- 父页面发送主题配置：
iframe.contentWindow.postMessage({ type: 'THEME_UPDATE', vars: { primary: '#007bff' } }, 'https://child-domain.com') - 子iframe收到后，自行解析并调用
document.documentElement.style.setProperty() - 必须校验
event.origin，否则存在安全风险
注意：子iframe需提前在DOMContentLoaded后绑定message监听，否则可能丢消息。
容易被忽略的细节
很多人以为“同源就能随便操作”，但实际卡点常在时机和上下文：
-
iframe的src是about:blank或空字符串时，contentDocument初始为空文档，无法直接写入:root - Vue/React等框架渲染的子页面，
load事件可能早于组件挂载，document.documentElement存在但:root规则尚未生效 - Chrome 115+ 对隐藏容器（
display: none）中的iframe加载更激进地延迟，可能导致load未触发就尝试操作
