Widely available Supported across all major browsers. Safe to use in production.

Host

The :host CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

Note: This has no effect when used outside a shadow DOM.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:host
54
79
63
10
54
10
Other
css.selectors.hostfunction

`:host()`
54
79
63
10
54
10
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
Notes 1 item(s)
Implementation note
  • Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.

Syntax

CSS 
:host {
  display: block;
  border: 1px solid #ccc;
}
:host(.active) {
  border-color: blue;
}

Live demo

:host Basics

CSS:host basic demo.

PreviewFullscreen

:host(.active)

CSS:host(.active) demo.

PreviewFullscreen

:host-context()

CSS:host-context() demo.

PreviewFullscreen

Use cases

  • Using Host

    The :host CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links