子组件var(--x)显示黑色或透明，是继承链断裂所致：浏览器仅沿DOM祖先链查找最近显式声明--x的元素，未找到则回退至属性初始值（如color计算为黑色）；常见断链原因包括all: unset、Fragment、Shadow DOM隔离、contain: style及大小写/拼写错误。
子组件var(--x)显示黑色或透明，不是语法错，是继承链断了
浏览器查找 var(--x) 时，只沿 DOM 祖先链向上找**最近一个显式声明了 --x 的元素**；没找到就回退到该 CSS 属性的初始值（如 color 初始为 inherit，最终计算为黑色）。常见断链点包括：
-
all: unset或all: initial出现在父容器上，直接清空所有自定义属性 - 父组件是
React.Fragment、Vue.Fragment或无真实 DOM 节点的高阶包装器，--x根本没挂载到 DOM 树里 - 子组件是 Web Component（如
<my-button>），其 Shadow DOM 不继承宿主外的变量，除非你在<my-button style="--x: red">上显式设置 - 父容器设置了
display: none—— 它会切断继承；而display: contents会移除自身在渲染树中的位置，也可能导致祖先链“跳过”该节点
DevTools 里搜 --x 显示 “inherited from <html>”，说明你写的覆盖规则根本没命中
这表示：你期望生效的局部变量声明（比如 .card { --x: red; }）压根没被应用到目标元素的祖先节点上。调试时盯紧三处：
- 右键父容器 → “Edit as HTML”，确认其
style属性里是否真有--x: red字符串（JS 对象里的值不算） - 打开 DevTools → Computed 面板 → 搜索
--x→ 点开箭头看 “Defined in” 是哪一行；如果是<html>，说明中间某层完全没声明 - 检查父容器的
computed display值，排除display: none或content-visibility: hidden类似隔离机制
React/Vue 中变量没透传，问题常出在“没落进真实 DOM 节点”
框架层的 JS 对象、context、props 本身不参与 CSS 继承。变量必须落在真实 DOM 元素的 style 属性或匹配的选择器规则中：
- 高阶组件别用
<></>，改用带style的容器：<div style={themeVars}><WrappedComponent /></div> - Vue 组合式 API 中，用
ref拿到宿主元素后调用.style.setProperty('--x', 'red')，尤其对第三方 Web Component 有效 - 避免在
useEffect里循环给多个子元素设style.setProperty—— 触发 layout thrashing；优先用预设 class 批量切换，如.theme-dark { --x: #1e293b; } - 若父组件用了
contain: style，子组件无法继承外部变量，此时变量必须在contain边界内重新声明
变量名大小写、连字符、拼写不一致，浏览器当它是另一个变量
CSS 变量严格区分大小写和连字符，--BgColor 和 var(--bgcolor) 完全无关。更隐蔽的是：
立即学习“前端免费学习笔记（深入）”；
-
--x: unset或--x: initial不是“保持原值”，而是主动切断向下传递：前者让var(--x, #000)取 fallback，后者等效于彻底删掉该变量声明 -
inherit对自定义属性无效 ——--x: inherit不会继承父级--x值，只对原生属性起作用 - Shadow DOM、iframe、
content-visibility: hidden区域天然隔离继承链，变量必须在对应文档/宿主元素上重新声明
--x: unset —— 它不报错、不显眼，但整条链就断了。别只盯着自己写的代码，先查 Computed 面板里 “Defined in” 的每一层。 
