Polymer custom style sometimes cascades incorreclty

Question

I've noticed that the cascade isn't always correct when using polymer custom style. From the looks of it, this could be a bug in the way the cascade is being applied to custom elements, but I'd just like to confirm that I'm not doing something silly.

Consider the following, scoped style, for my custom element:

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

... but once rendered, the :first-child gets overridden by first definition, as you can see in the image below. The only way to ensure that my border: none is applied correctly, is to use !important, which I'd rather not.

I should note that I've seen this behaviour in many other places, and have opted to just use !important as a quick solution, but this starts to feel clunky.

Just adding the image of the rendered element here to show the "incorrect" top border.

Answer 1

From what I’ve understood, the problem comes from the CSS variables/custom properties polyfill.

It adds another class, .product-0 in this case, to scope the property where you use var(--color-gray). You probably figured this also already, but just pointing it out.

You can override that with an equally specific selector (no need to use !important), e.g. #price ::content .price.price span:first-child (notice the duplicate .price).

I don’t know if this can be fixed in the polyfill.