:host-context selector

Sometimes it's useful to apply styles based on some condition outside of a component's view. For example, a CSS theme class could be applied to the document <body> element, and you want to change how your component looks based on that.

Use the :host-context() pseudo-class selector, which works just like the function form of :host(). The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root. The :host-context() selector is useful when combined with another selector.

The following example applies a background-color style to all .demo elements inside the component, only if some ancestor element has the CSS class theme-light.

Source

demo.component.css

.demo {
  border: 1px solid #666;
}

:host-context(.theme-light) .demo {
  background-color: #eef;
}

demo.component.html

<div class="demo">Demo block</demo>

index.html

<!doctype html>
...
<body class="theme-light">
  <app-root></app-root>
</body>
</html>

Result

Demo block