: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.
Syntax
/* Usage 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.
54+
63+
10+
79+