: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.
Quick 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.
Safe to use without fallbacks.
54+
63+
10+
79+