聚合物定制样式有时会变得不正确

Question

我注意到，使用聚合物自定义样式时，级联并不总是正确的。从外观上看，这可能是将级联应用于自定义元素的方式中的一个错误，但是我只是想确认我没有做任何愚蠢的事情。

考虑以下自定义元素的作用域样式：

    #price ::content .price span {
        display: block;
        padding: 4px;
        border-top: 1px solid var(--color-gray1);
    }
    #price ::content .price span:first-child { border-top: none; }

...但是一旦渲染，：first-child将被第一个定义覆盖，如下图所示。确保border: none正确应用my的唯一方法是使用!important，而我不希望这样做。

我应该注意，我已经在许多其他地方看到了这种行为，并选择仅用!important作快速解决方案，但这开始变得笨拙。

只需在此处添加渲染元素的图像即可显示“不正确”的顶部边框。

Answer 1

据我了解，问题来自CSS变量/自定义属性polyfill。

.product-0在这种情况下，它将添加另一个类来限定您使用的属性的范围var(--color-gray)。您可能也已经想到了这一点，但只是指出了这一点。

您可以使用一个同样特定的选择器（无需使用!important）覆盖它，例如#price ::content .price.price span:first-child（注意重复的.price）。

我不知道这是否可以在polyfill中修复。