: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 theshadow 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-classand the specificity of its argument.

Try it

/* Following CSS is being applied inside the shadow DOM. */:host(h1) {  color: red;}:host(#shadow-dom-host) {  border: 2px dashed blue;}

<!-- elements outside shadow dom --><div>  <h1></h1></div>

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