Customizing css of other components


First attempt to apply some customizations to Home Assistant, and i have some doubts, as my experience with web components is limited also:

  • I have already working a custom card for the climate component, where i wanted to customize the badge icon to light up on specific data-states.
  • I’ve located the css that triggers what i want in components/entity/state-badge.html, and created my specific css that i need that is:

ha-state-icon[data-domain=climate][data-state=on] {
color: var(–paper-item-icon-active-color, #FDD835);

The problem is that if i put this css on the customized state, of course it doesn’t apply to the ha-state-icon because is out of the scope of the state-badge-component.

I wanted to avoid to modify directly the state-badge.html to achive this and i wondered if i could do that from my custom card html.

Thank you