:host-context()
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).
The web standards community has deprecated this feature. Browsers are actively phasing out support for it.
Syntax
/* Usage 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
Since
2020 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
54+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more