如何定义可继承同名已有值且带合理默认值的CSS变量？为何写法不生效？

你这种--background: var(--background, white)的写法属于CSS变量的递归循环引用，按照CSS规范，这种赋值是无效的——浏览器会把这个变量判定为「未定义」，哪怕调试器看起来显示了fallback值，实际渲染时也不会生效。

调试器的显示其实是个误导：它只是解析了var()函数里的fallback参数，但变量本身因为循环依赖已经被标记为无效，所以组件里使用这个变量的地方根本拿不到正确的值。

想要实现「优先继承上级同名变量，没有则用默认值」的效果，有两种靠谱的写法：

方式1：用私有变量存默认值 #

先定义一个组件内部的私有变量（惯例用下划线开头区分）存默认值，再让对外的变量引用上级传入的值，没有就用私有变量的默认：

:host {
  /* 私有变量：组件默认样式 */
  --_background: white;
  --_color: black;
  --_error-color: crimson;

  /* 对外变量：优先用上级传入的，否则用私有默认 */
  --background: var(--background, var(--_background));
  --color: var(--color, var(--_color));
  --error-color: var(--error-color, var(--_error-color));
}

/* 组件内部使用变量 */
.component-inner {
  background: var(--background);
  color: var(--color);
}
.error-text {
  color: var(--error-color);
}

方式2：直接在使用时加fallback #

更简单的方式是不用提前在:host里定义变量，而是在组件内部使用变量的地方直接加fallback：

.component-inner {
  background: var(--background, white);
  color: var(--color, black);
}
.error-text {
  color: var(--error-color, crimson);
}

这种写法更直接，上级传入了对应变量就用传入的，没传入就用默认值，完全避免了循环引用的问题。

内容的提问来源于stack exchange，提问作者podperson