CSS :host-context()

The :host-context() pseudo-class is used inside a Shadow DOM stylesheet. It matches the host element when the host or one of its ancestors matches the selector argument.

Syntax

:host-context(.theme-dark) {
  color: white;
}

Example

/* inside a custom element shadow root */
:host-context(.theme-dark) .panel {
  background: #0f172a;
  color: white;
}

Result:

This selector only makes sense inside Web Component shadow styles.

Important note

Support and behavior are not as universal as ordinary selectors. For many components, CSS custom properties on the host are a more portable theming strategy.