未设置CSS自定义属性时回退到默认值

Question

我正在考虑使用CSS定制属性作为Web组件的主题解决方案，但不确定应用定制属性的最佳方法，同时如果未指定该定制属性，则可以保留良好的默认行为。

示例：我创建了一个组件，该组件的阴影树中包含一个<button>元素，并希望让组件主题的用户根据其应用程序品牌需求将所包含的按钮的前景色和背景色设为。 DOM如下所示：

<my-element>
  #shadow-root
    <style>
    button {
      background-color: var(--my-element-background-color);
      color: var(--my-element-color);
    }
    </style>
    <button>
      ...
    </button>
</my-element>

如果没有指定相关的CSS自定义属性，则可以合理地期望按钮显示其默认的默认外观，但是上述CSS不足以实现此目的。 使用var()会覆盖浏览器的默认用户代理样式表，因此，如果未指定自定义属性，则颜色属性将恢复为所有元素的基础默认值，而不是button元素的默认值。 因此，按钮最终以background-color: transparent 对于color ，默认值因浏览器而异。

这些常规的默认颜色没有帮助； 需要的是按钮的默认颜色值。 可以手动查找并复制用户代理样式表中的默认值。 在这种情况下，默认值很可能是 buttonface和buttontext 。 在这种情况下，可以将这些编码为自定义属性的默认值。

button {
  background-color: var(--my-element-background-color, buttonface);
  color: var(--my-element-color, buttontext);
}

这是不幸的。 为每个要通过自定义属性公开的属性查找默认值是一件很痛苦的事情。

但是更大的问题是，这迫使人们将用户代理样式编码为一个组件。 从几个层面来看，这似乎很糟糕。

1. 浏览器的默认样式不同。
2. 尽管上述颜色恰好具有标准名称，但是该方法无法处理诸如padding属性，其中的值没有名称，默认值因浏览器而异。
3. 即使对于具有一致默认值的属性，将来用户代理样式也可能会更改。

我猜想可能还有其他原因不做上述事情。

我想知道是否有写CSS规则的效果，即只有在定义了定义属性的情况下才应用自定义属性，否则就没有效果。 我希望找到一种解决方案，该解决方案在当前发布时仅依赖自定义属性，并且不依赖于诸如@apply之类的新提议。

Answer 1

您需要的是'revert'值 ，它可以解析为UA默认值 ，而不是初始值。 然后，您可以将其用作后备值。

（我认为关键字尚未得到广泛支持，但这是我们针对此问题设计的解决方案。）