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

calcite-chip

component isn't styled pink instead of blue? https://codepen.io/eriklharper/pen/bGJeaJz?editors=1111

CodePenErik Harper

Why doesn't my CSS custom property override apply to this attribute...

Example from https://newinweb.com/2018/04/29/custom-elements/...

curiousmissfox•3/13/24, 12:05 AM

Your JS is setting it to blue which is being loaded last, after your css so it’s staying blue.

Change that to pink

Erik HarperOP•3/13/24, 12:07 AM

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.

Erik HarperOP•3/13/24, 12:07 AM

I figured out a solution to this though, just now: https://codepen.io/eriklharper/pen/mdgEXyj

CodePenErik Harper

CSS Custom Property Overrides Applying with direct element selector...

Example from https://newinweb.com/2018/04/29/custom-elements/...

Erik HarperOP•3/13/24, 12:08 AM

If I remove the from the shadowRoot style selector, it works