无需重复属性声明，如何让嵌套元素自动重算CSS根变量？

给定以下代码，当在嵌套元素.myElement中更新根CSS变量后，文本颜色可以正确变更，但需要重复编写color属性。能不能省去这一步，让嵌套元素自动重新计算该属性？

:root {
--text-color-primary: black;
}

body {
  color: var(--text-color-primary);
}

.myElement {
  --text-color-primary: blue;
  color: var(--text-color-primary); /* 能不能去掉这行？ */
}

<body>
  This is the body text.
  <div class="myElement">This is my element</div>
</body>

补充说明 #

我们维护一套设计系统，包含定义所有变量默认值的核心主题，以及使用这些变量的组件与样式列表。希望用户能通过在作用域内覆盖全部或部分变量自定义组件外观，且不影响作用域外样式，无需了解变量所有使用场景，也无需逐一替换——逐一替换不仅繁琐，还易出错（若设计系统增删使用变量的样式，用户需同步更新代码）。

完全可以省去重复的color属性，核心是利用CSS变量的继承特性。

原理 #

CSS变量本身支持继承，当你在.myElement作用域内覆盖--text-color-primary变量值时，这个新值会被该元素及其子元素继承。而body已经设置了color: var(--text-color-primary)的样式规则，.myElement作为body的子元素，会自动继承这条规则，直接使用更新后的变量值，不需要再重复声明color属性。

修改后的代码 #

:root {
  --text-color-primary: black;
}

body {
  color: var(--text-color-primary);
}

.myElement {
  --text-color-primary: blue;
  /* 移除重复的color声明，元素会自动继承body的color规则并使用新变量值 */
}

效果验证 #

此时页面中：

• body的文本保持黑色（使用根变量默认值）
• .myElement的文本自动变为蓝色（继承body的color规则，使用自身作用域内的变量新值）

适配设计系统场景 #

这种方式完美匹配你的需求：用户只需要在目标组件的作用域内覆盖所需变量，不需要修改任何设计系统中已有的样式属性。就算后续设计系统新增或删除使用该变量的样式，用户的自定义代码也不需要同步修改，既简化了操作，也避免了遗漏出错的风险。

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