: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 function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host. :host() has no effect when used outside a shadow DOM.

The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of :host-context().

Note: While other functional pseudo-classes such as :is() and :not() accept a list of selectors as their parameters, :host() takes a single compound selector as its parameter. In addition, while :is() and :not() only take into account the specificity of their argument, the specificity of :host() is both the specificity of the pseudo-class and the specificity of its argument.

Try it

css
/* Selects a shadow root host, only if it is
   matched by the selector argument */
:host(.special-custom-element) {
  font-weight: bold;
}

Syntax

css
:host(<compound-selector>) {
  /* ... */
}

Examples

Selectively styling shadow hosts

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

In this example we have a 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(.footer) { color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <footer> a special color.

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 implementation notes.

See also