css变量无法跨iframe共享是浏览器设计使然；同源需load后手动注入:root或setproperty，跨域只能用postmessage由子页自行设置，克隆link或共享css文件均无效。
CSS 变量无法在 iframe 之间共享，不是配置错误或代码写法问题，而是浏览器明确设计的隔离行为：每个 iframe 拥有完全独立的 document 和样式作用域，:root 中定义的 --var-name 只在本页生效，不继承、不广播、不联动。
同源 iframe 里 document.documentElement.style.setProperty() 为什么没用？
父页面调用 document.documentElement.style.setProperty('--color', 'red')，只改自己 document 的根元素；子 iframe 的 documentElement 是另一个对象，内存地址不同、样式树无关。即使同源，你也无法“推”变量过去。
- 必须等子 iframe
load事件触发后，再通过iframe.contentDocument访问其内部 document - 只能在子 iframe 内部执行
document.documentElement.style.setProperty()，或插入<style>:root { --color: red; }</style> - 若子页面未在 CSS 中使用
var(--color)，或未声明:root，设了也无视觉效果
跨域 iframe 根本读不到父页的 CSS 变量
iframe.contentDocument 在跨域时直接为 null 或抛出 DOMException: Blocked a frame from accessing a cross-origin frame。任何尝试读取、克隆、注入的操作都会被拦截。
- postMessage 是唯一可行路径：父页发消息，子页收到后自行调用
document.documentElement.style.setProperty() - 必须校验
e.origin，禁用'*'，否则存在 XSS 风险 - 传值时要带单位（如
'1.5rem'），不能只传数字1.5，否则子页calc(var(--gap) * 2)会失效
克隆 link 标签或共享 variables.css 为什么还是不生效？
克隆 <link rel="stylesheet"> 或让父子页都引入同一份 variables.css，看起来“用了同一个文件”，但变量依然各自独立。
- 克隆只复制标签节点，不复制运行时样式状态；子 iframe 加载该 CSS 后，
var(--x)仍查 *自己的*:root，而非父页 - 如果
variables.css里写了color: var(--text-color)，而子页:root没定义--text-color，最终计算值就是initial或继承值 - 相对路径（如
./css/vars.css）在 iframe 内以 iframe 当前 URL 为基准解析，极易 404 —— 必须用绝对 URL 或 CDN
最容易被忽略的是：CSS 变量的作用域是静态绑定到声明它的 document 的，它不会“活”着响应外部变化。哪怕同源、DOM 已 ready，父页改了变量，子 iframe 也不会自动更新 —— 所有同步都必须显式触发、手动注入、逐帧控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
