:host

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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.

Try it

css
/* Selects a shadow root host */
:host {
  font-weight: bold;
}

Syntax

css
:host {
  /* ... */
}

Examples

Styling the shadow host

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a basic custom element — <context-span> — that you can wrap around text:

html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

Inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some CSS rules:

js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";

The :host { background: rgb(0 0 0 / 10%); padding: 2px 5px; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document.

Specifications

Specification
CSS Scoping Module Level 1
# host-selector

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:host

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also