Why is a CSS variable overriding both inline and ID-based !important styles in Angular...

I'm working on an Angular project using Angular Material, and I noticed a strange behavior where a font-weight style defined via a CSS variable seems to override both:

• 
  An inline style with !important
  
  
• 
  An ID-based selector also using !important
  

The variable is defined somewhere within Angular Material's theming system.

The rule .mdc-list-item__primary-text does not use !important, yet it wins.

I'm assuming this might be related to Angular’s view encapsulation or Shadow DOM behavior, but I'm not sure why or how to properly override it.

Why is the variable-based style able to override both the inline !important and ID-based !important? And how can I reliably override such a style if needed?

Any insights into how Angular Material or CSS variable resolution affects specificity and importance would be really appreciated.

Continue reading...