: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.

/* Usage Example */
:host {
  /* Sets the default look of the custom element */
  display: block;
  border: 1px solid #ccc;
  padding: 1rem;
}
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+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC