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.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

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: This has no effect when used outside a shadow DOM.

/* Selects a shadow root host, only if it is
   matched by the selector argument */ 
:host(.special-custom-element) {
  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(.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 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 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes No No Yes No ?

See also

 

 

Document Tags and Contributors

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