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" */