css - Polymer custom style sometimes cascades incorreclty -

i've noticed cascade isn't correct when using polymer custom style. looks of it, bug in way cascade being applied custom elements, i'd confirm i'm not doing silly.

consider following, scoped style, 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; } 

... once rendered, :first-child gets overridden first definition, can see in image below. way ensure border: none applied correctly, use !important, i'd rather not.

i should note i've seen behaviour in many other places, , have opted use !important quick solution, starts feel clunky.

just adding image of rendered element here show "incorrect" top border.

from i’ve understood, problem comes css variables/custom properties polyfill.

it adds class, .product-0 in case, scope property use var(--color-gray). figured already, pointing out.

you can override equally specific selector (no need use !important), e.g. #price ::content .price.price span:first-child (notice duplicate .price).

i don’t know if can fixed in polyfill.