MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

:host

There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

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 select a custom element from inside its shadow DOM.

Note: This has no effect when used outside a shadow DOM.

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

Syntax

{{ csssyntax }}

Examples

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

In this example we have a simple 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:

let style = document.createElement('style');
      let 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: rgba(0,0,0,0.1); padding: 2px 5px; }';

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

Specifications

Specification Status Comment
CSS Scoping Module Level 1
The definition of ':host' in that specification.
Working Draft Initial definition.

Browser compatibility

Supported in Chrome and Safari.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes No No No Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes No No Yes Yes ?

See also

 

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,