CSS Custom Property override on a custom element with attribute selectors doesn't work as expected
Can someone here explain to me why the second instance of my
calcite-chip component isn't styled pink instead of blue? https://codepen.io/eriklharper/pen/bGJeaJz?editors=11114 Replies
Your JS is setting it to blue which is being loaded last, after your css so it’s staying blue.
Change that to pink
Changing it in the shadowRoot style isn't the use case I'm after though. This is for the case where the custom element exposes an overridable css token property that can make it themable.
I figured out a solution to this though, just now: https://codepen.io/eriklharper/pen/mdgEXyj
If I remove the
.container from the shadowRoot style selector, it works