浏览器内联样式不解析var()函数，必须通过:root定义变量并在css规则中引用；自定义元素需在connectedcallback后读取变量；video控件需自定义替代原生控件；主题切换应优先使用class而非直接修改style属性。
为什么直接在style属性里写var(--color)不生效
因为浏览器内联样式（style属性）不解析var()函数，它只接受静态值。你写style="color: var(--primary)"，CSS引擎会直接忽略这条声明，而不是报错或降级——结果就是颜色没变，还查不出原因。
真正起作用的路径只有一条：先在CSS规则里定义变量（比如:root { --primary: #3b82f6; }），再在另一条CSS规则中用var()引用它，最后靠class或选择器把这条规则挂到元素上。
-
:root是必须的起点，否则变量作用域太窄，子元素读不到 - 别在组件级选择器里重复声明同名变量（如
.player { --primary: red; }），容易被更宽泛的:root覆盖或冲突 - 所有
var()调用都建议带 fallback，比如color: var(--text-color, #1f2937);，避免变量未定义时样式崩塌
customElements.define()里怎么安全注入CSS变量
自定义元素内部如果要响应全局主题，不能靠document.documentElement.style.setProperty()后立刻读取getComputedStyle——因为变量更新和重绘不同步，JS可能拿到旧值。
正确做法是把变量读取延迟到connectedCallback之后，并监听storage事件或class变更，而不是依赖一次性的计算值。
- 在
render()或update()方法里，用getComputedStyle(this).getPropertyValue('--primary')实时取值，别缓存 - 如果元素需要深色模式适配，优先监听
html元素的className变化，而不是matchMedia，后者只反映系统偏好，不反映用户手动切换 - 避免在
constructor里访问getComputedStyle，此时元素还没挂载，返回空字符串
如何让<video></video>控件随CSS变量动态换肤
视频播放器控件不是普通DOM，它的伪元素（比如::-webkit-media-controls）不继承:root变量，也不能用var()直接控制颜色。所以换肤逻辑必须分两层：一层管自定义UI，一层管原生残留。
- 先彻底移除
controls属性，用<input type="range">等自定义控件替代，这些元素能正常响应var(--slider-bg)等变量 - 对WebKit/Firefox残留控件，用
video::-webkit-media-controls { display: none !important; }强制隐藏，别指望用变量控制它们 - 进度条拖拽手柄（
::-webkit-slider-thumb）需单独用background-color: var(--thumb-color)，且必须加-webkit-appearance: none - 时间显示文案（如
<span class="time"></span>）可直接用color: var(--text-on-dark)，但注意fallback值要兼顾浅/深背景
主题切换时localStorage和class谁该优先
答案是class必须优先。因为CSS变量本身不触发重绘，只有class切换才会让浏览器重新计算所有依赖该class的选择器，包括其中的var()。
单纯改document.documentElement.style.setProperty('--bg', 'black')，若没有对应CSS规则绑定这个变量，页面根本不会变色。
- 初始化时先读
localStorage.getItem('theme')，有值就给document.documentElement加class="theme-dark"这类标记 - CSS里写
.theme-dark { --bg: #0f0f0f; --text: #e5e7eb; }，所有控件样式都基于这个class下的var()展开 - 切主题时只改class，不要删掉旧class再加新class，用
el.classList.toggle('theme-dark', isDark)更稳妥 - 别忘了在
storage事件里同步更新class，否则其他标签页的主题会不同步
最易被忽略的点：CSS变量不是“开关”，而是“信号”。它本身不驱动任何行为，只是把JS状态翻译成样式语言的中间媒介。真正决定换肤效果的，永远是class切换 + 选择器权重 + fallback兜底这三者的配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
