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=1111
4 Replies
clevermissfox
clevermissfox8mo ago
Your JS is setting it to blue which is being loaded last, after your css so it’s staying blue.
:host([kind="inverse"][appearance="solid"]) .container {
--calcite-chip-text-color: blue;
}
:host([kind="inverse"][appearance="solid"]) .container {
--calcite-chip-text-color: blue;
}
Change that to pink
Erik Harper
Erik Harper8mo ago
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 Harper
Erik Harper8mo ago
If I remove the .container from the shadowRoot style selector, it works
Want results from more Discord servers?
Add your server