: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:hostCSS pseudo-class selects the shadow host of theshadow 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

/* This CSS is being applied inside the shadow DOM. */:host {  background-color: aqua;}

<h1></h1>

const shadowDom = init();// add a <span> element in the shadow DOMconst span = document.createElement("span");span.textContent = "Inside shadow DOM";shadowDom.appendChild(span);// attach shadow DOM to the #shadow-dom-host elementfunction 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;}

css

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

Syntax

css

:host {  /* ... */}

Examples

Styling the shadow host

The following snippets are taken from ourhost-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 createstyle andspan elements, fill thespan with the content of the custom element, and fill thestyle 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.