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

:host-context()

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-context() 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's ancestor(s) in the place it sits inside the DOM hierarchy.

A typical use of this is to use it with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>.

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

/* Selects a shadow root host, only if it is
   a descendant of the selector argument given */ 
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  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-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1> — we've used it to make it clear that the custom element shouldn't appear inside the <h1> in our design.

Specifications

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

Browser compatibility

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: fscholz, chrisdavidmills
 Last updated by: fscholz,