内联样式中style="--var: value"合法但仅限当前元素作用域，不自动注入全局；自定义属性默认不继承，子元素需在CSS规则中显式用var(--var)引用才生效。
内联样式里写 --var: value 是合法的，但不等于变量就“生效”了
很多人以为在 HTML 标签上加 style="--color: red" 就能直接被后续 var(--color) 读到，其实不是。这个声明只对当前元素及其后代生效，且必须配合 var() 出现在该元素或其子元素的 CSS 规则中才起作用——它不会自动注入到 :root 或全局作用域。
常见错误现象：<div style="--bg: #222"><p style="background: var(--bg)">黑底</p></div> 看似合理，但如果父 div 没有显式设置 background 或其他继承属性，p 其实拿不到值（因为 --bg 只在 div 作用域，而 background 不继承自定义属性）。
- 自定义属性默认不继承，除非你用
inherit显式声明（比如color: inherit），但--xxx本身不参与继承链 - 如果想让子元素能用，得确保父元素的
style属性存在，且子元素的规则里真用了var(--xxx) - 别指望
document.documentElement.style.setProperty('--bg', '#222')后，某个已有内联style="background: var(--bg)"的元素会立刻更新——它只影响后续计算，已渲染的元素需触发重绘（如 class 切换、offsetHeight强制回流等）
style 属性里混用 var() 和 JS 响应式逻辑，Vue/React 容易翻车
框架的 :style 或 style={} 是纯静态映射，它把对象转成字符串塞进 style 属性，不监听 CSS 变量变化。你写 style={{ background: 'var(--bg)' }}，React 就当它是固定字符串，后面改 --bg，它完全不管。
正确做法是让框架控制变量本身，而不是变量的引用：
立即学习“前端免费学习笔记（深入）”；
- Vue 3 推荐：
:style="{ '--bg': theme.bg, background: 'var(--bg)' }"—— 这样--bg是响应式绑定的，background字符串只是固定模板 - React 不要这么写：
style={{ background: `var(--bg, ${theme.bg})` }}—— 回退值被 JS 硬编码，失去运行时灵活性 - SSR 场景下，服务端没 JS，
setProperty失效，必须靠初始 HTML 的<html style="--bg: #222">或<div style="--bg: #222">静态注入
Content-Security-Policy 下，setAttribute('style', ...) 很可能被拦，但 element.style.setProperty() 不会
CSP 的 style-src 指令管的是“样式来源”，不是“样式内容”。element.setAttribute('style', '--c: red; color: var(--c)') 属于内联样式注入，若策略不含 'unsafe-inline'，整条会被静默丢弃；而 element.style.setProperty('--c', 'red') 是 JS API 调用，不触发 CSP 检查。
典型误判场景：
- Electron 或本地
file://加载时，style-src 'self'实际匹配空源，导致<style>:root { --x: y }</style>被丢弃，变量根本没注册 - 用
innerHTML往<head>插<style>也会被拦，除非策略明确允许该方式（如带 nonce） - 安全替代方案：用
CSSStyleSheet.insertRule()动态追加规则，或提前在外部 CSS 文件中定义:root变量并<link rel="stylesheet">
IE 不支持 CSS 变量，但 fallback 不是加个 var(--x, red) 就万事大吉
var(--x, red) 在 IE 里整个声明无效（解析失败），连 fallback 都不生效，最终取浏览器默认值（比如 color 变成黑色）。真正兼容 IE 的做法是 JS 主动降级：
- 先检测
CSS.supports('color', 'var(--x)')，不支持就走 JS 批量重写element.style.color = theme.color - 别依赖单个
var()fallback，而是整套主题逻辑做分支：支持变量就挂:root，不支持就用 class 切换 + 预编译多套 CSS - Shadow DOM 中要注意：自定义属性不会自动穿透，子组件需显式
inherit或用:host选择器重设
最常被忽略的一点：CSS 变量的值是字符串，不是计算结果。写 --size: 10px * 2 会直接报错，必须由 JS 计算后传入字符串值，或者用 CSS calc() 组合：width: calc(var(--size) * 2)。
