:hostfunction
Used inside a Shadow DOM to style the 'host' element (the custom element itself). The functional version ':host()' lets you apply styles only if the host matches a specific selector.
Syntax
/* Usage Example */
:host(.dark-mode) {
background-color: #333;
color: white;
/* styles the custom element only when it has the 'dark-mode' class */
}:hostfunction Browser support
Widely available
Since
2020 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
54+
63+
10+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more