我正在考虑使用 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);
}
这很不幸。查找要通过自定义属性公开的每个属性的默认值是一件很痛苦的事情。
但一个更大的问题是，这迫使人们将用户代理样式编码到组件中。这在几个层面上似乎都很糟糕。
- 浏览器的默认样式有所不同。
- 虽然上述颜色恰好有标准名称，但该方法无法处理像
padding这样的属性，其中该值没有名称，并且默认值因浏览器而异。 - 即使对于具有一致默认值的属性，用户代理样式将来也可能会发生变化。
我猜除了上述原因之外，可能还有其他原因不这样做。
我想知道是否有办法编写一个 CSS 规则，以达到自定义属性仅在定义时才应用的效果，否则没有任何效果。我希望找到一个仅依赖于当前发布的自定义属性的解决方案，而不依赖于新的提案，例如 @apply .
最佳答案
你想要的是'revert' value ，它解析为 UA 默认值，而不是初始值。然后您可以将其用作后备值。
(我认为该关键字尚未得到广泛支持，但这是我们针对此问题设计的解决方案。)
关于css - 未设置 CSS 自定义属性时回退到良好的默认值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36291825/