Web/CSS/ host-context()

From Get docs


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.

In other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.

One typical use of this is with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>.  Another typical use would be to allow inner elements to react to classes or attributes on any anscestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>.

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;
}

/* Changes paragraph text color from black to white when 
   a .dark-theme class is applied to the document body */
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

Syntax

:host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]?  | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Examples

Selectively styling shadow hosts

The following snippets are taken from our host-selectors example ([[../../../../../../mdn.github.io/web-components-examples/host-selectors/index|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 1The definition of ':host-context()' in that specification. Working Draft Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:host-context() Chrome

Full support 54

Edge

Full support 79

Firefox No support No

Notes'

No support No

Notes'

Notes' See bug 1082060.

IE

No support No

Opera

Full support 41

Safari

No support No

WebView Android

Full support 54

Chrome Android

Full support 54

Firefox Android No support No

Notes'

No support No

Notes'

Notes' See bug 1082060.

Opera Android

Full support 41

Safari iOS

No support No

Samsung Internet Android

Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.'
See implementation notes.


See also