:host()
Allows you to style the 'host' (the custom element itself) from within the element's own Shadow DOM. It's the standard way to set a component's default display, width, or height.
Quick example
:host {
/* Sets the default look of the custom element */
display: block;
border: 1px solid #ccc;
padding: 1rem;
}:host() 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+