css变量不跨iframe传递是设计使然；同源时可通过postmessage同步或共享css文件，跨域时只能用postmessage通信并动态设置；clonenode无法共享变量因作用域绑定各自document。
CSS 变量（--my-color）不会跨 iframe 传递，这不是 bug，而是浏览器设计使然：iframe 拥有独立的 document 和样式作用域，:root 中定义的变量只在本上下文生效。
同源 iframe 中如何让 CSS 变量“可用”
同源时你无法“继承”父页的 :root 变量，但可以主动复制、注入或复用逻辑。
- 监听
load事件后，读取父页getComputedStyle(document.documentElement)获取变量值，再写入 iframe 的:root样式表（注意：只能取计算后值，无法拿到原始var(--x)表达式） - 更可靠的做法是：把变量定义抽成独立 CSS 文件（如
shared-vars.css），让父页和 iframe 页面都通过<link rel="stylesheet">加载同一份——路径必须是绝对 URL，且需确保跨环境可访问 - 避免在 iframe 内直接
@import父页 CSS：它会以 iframe 的baseURI解析路径，极易 404；也不要用document.write拼接style字符串，容易破坏 HTML 结构
跨域 iframe 完全无法读取父页 CSS 变量
此时 iframe.contentDocument 访问直接抛出 DOMException: Blocked a frame from accessing a cross-origin frame，任何尝试读取、注入、克隆样式的行为都会失败。
- 唯一可行路径是通信驱动：父页用
iframe.contentWindow.postMessage({ type: 'set-css-vars', vars: { '--primary': '#007bff' } }, targetOrigin) - iframe 内部监听
window.addEventListener('message', e => { ... })，校验e.origin后，动态创建<style></style>并插入变量声明：document.documentElement.style.setProperty('--primary', value) - 不要在 message handler 中直接操作
document.body.style——变量应设在:root或具体元素上，否则无法级联
为什么 cloneNode(link) 不等于共享变量
有人试过克隆父页的 <link> 标签到 iframe 的 head，结果变量仍不生效。这不是路径或时机问题，而是根本机制误解：
-
cloneNode(true)复制的是标签节点，不是运行时样式状态；iframe 加载该 CSS 后，其中的var(--x)仍会去查 *自己的*:root，而非父页 - 若该 CSS 文件本身依赖父页变量（比如写了
color: var(--text-color)），而 iframe 的:root没定义--text-color，那最终计算值就是initial或继承值，不是你预期的颜色 - 真正要共享的不是“文件”，而是“变量定义”本身——要么同源下注入
:root声明，要么跨域下靠 postMessage 同步值
最易被忽略的一点：CSS 变量作用域是静态的，它绑定的是声明它的 document，不是嵌套关系。哪怕 iframe 是同源且 DOM 已 ready，父页改了 document.documentElement.style.setProperty()，iframe 内也不会响应——变量不会“活”着同步过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
