聚合物自定义样式有时会错误地级联

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 的唯一方法是使用 !important，我宁愿不使用它。

我应该注意到，我在很多其他地方都看到过这种行为，并选择只使用 !important 作为快速解决方案，但这开始感觉很笨拙。

只需在此处添加渲染元素的图像即可显示 "incorrect" 顶部边框。

Answer 1

第一个声明比第二个声明更具体。这可能是问题所在。

Answer 2

据我了解，问题出在 CSS variables/custom 属性 polyfill。

在本例中，它添加了另一个 class、.product-0，以限定您使用 var(--color-gray) 的属性。您可能也已经想到了这一点，但只是指出来而已。

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

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

Answer 3

DOM 结构的规范是覆盖 css 的主要角色。

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

#price ::content .price span 比 #price ::content .price span:first-child.

更具体

聚合物自定义样式有时会错误地级联

Polymer custom style sometimes cascades incorreclty

css

polymer

custom-element