Firefox Tomorrow

css pseudo class

`:host` CSS pseudo-class

View on MDN ↗

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.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
/* This CSS is being applied inside the shadow DOM. */

:host {
  background-color: aqua;
}

<h1 id="shadow-dom-host"></h1>

const shadowDom = init();

// add a <span> element in the shadow DOM
const span = document.createElement("span");
span.textContent = "Inside shadow DOM";
shadowDom.appendChild(span);

// attach shadow DOM to the #shadow-dom-host element
function init() {
  const host = document.getElementById("shadow-dom-host");
  const shadowDom = host.attachShadow({ mode: "open" });

  const cssTab = document.querySelector("#css-output");
  const shadowStyle = document.createElement("style");
  shadowStyle.textContent = cssTab.textContent;
  shadowDom.appendChild(shadowStyle);

  cssTab.addEventListener("change", () => {
    shadowStyle.textContent = cssTab.textContent;
  });
  return shadowDom;
}

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

Syntax

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

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

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

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also