:host-context() | CSS Selectors & Pseudo-classes

A pseudo-class used in Web Components to style the custom element based on its position in the outside page (e.g., styling a component differently if it's placed inside a 'dark-mode' container).

Quick example

:host-context(.dark-theme) {
  /* Styles the component for dark theme if its parent has the class */
  background-color: #333;
  color: white;
}

:host-context() Browser Support

Limited availability 80% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

54+

79+