CSS变量在iframe中无法获取计算值，因每个iframe拥有独立document和:root作用域，父页setProperty仅影响自身；同源时需监听load事件后操作contentDocument.documentElement，跨域则须通过校验origin的postMessage通信并由子页自行setProperty。
为什么--primary在iframe里取不到计算值
因为每个iframe有独立的document和:root作用域，父页设置的document.documentElement.style.setProperty('--primary', '#007bff')只影响自身，子页getComputedStyle(document.documentElement)拿到的是它自己定义的变量（或undefined）。这不是兼容性问题，而是浏览器强制隔离的设计。
同源时用setProperty动态写入变量要等load事件
即使同源，iframe.contentDocument在load前是null，直接操作会报错。必须等子页DOM加载完成再写入。
- 监听
iframe的load事件，而非DOMContentLoaded - 确认子页已声明
:root（哪怕空着），否则style.setProperty无效 - 用
iframe.contentDocument.documentElement.style.setProperty('--color', 'red')，不是document.documentElement - 避免在子页未加载完时就调用
getComputedStyle，会返回空字符串或默认值
跨域时postMessage传--theme必须校验event.origin
跨域下contentDocument不可访问，唯一路径是通信后由子页自行设置。但postMessage若不校验来源，任意站点都能伪造消息篡改样式。
- 父页发送：用
iframe.contentWindow.postMessage({ type: 'SET_CSS_VARS', vars: { '--primary': '#007bff' } }, 'https://target.com')，不能用'*' - 子页接收：必须检查
if (e.origin !== 'https://parent.com') return，再遍历vars对象调用document.documentElement.style.setProperty(key, value) - 如果子页没监听
message，或者没做origin校验，变量永远不会生效 - 注意：
JSON.stringify序列化后再发，子页用JSON.parse(e.data)解析，IE11需垫片
textContent比innerHTML更安全地注入style标签
同源场景下，有人习惯用style.innerHTML = ':root { --x: red; }'，但这可能触发XSS（尤其当变量值来自用户输入）。即便同源，也应避免。
立即学习“前端免费学习笔记（深入）”；
- 始终用
style.textContent = ':root { --primary: #007bff; }' - 用
document.createElement('style')+appendChild，不要复用旧style节点 - 若子页已有
:root且含var(--primary)，注入后立即生效；否则需确保后续CSS规则引用了该变量 - 变量名带连字符（如
--bg-color）没问题，但不能以数字开头或含空格
:root里用了var(--primary)。光传过去、设进去，不代表能渲染——得有引用，才有计算。 
