Style Angular Components based on their context

The Angular :host-context() selector allows you to style your component based on some conditions outside the component - for example based on a class set on the body element - without the need to set view encapsulation to none.

The selector will look for a matching element in any ancestor of your component up to the document root.

:host-context(.dark-theme) .my-component {
  /* Styles are applied when there is a 
     "dark-theme" class on any ancestor */
}

This is not limited to CSS class selectors but works with any valid CSS selector.

:host-context([theme="dark"]) .my-component {
  /* Styles are applied when there is an ancestor
     that has an attribute theme="dark" */
}