W3cubDocs

/CSS

:host

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

Syntax not found in DB!

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes No
No
Under consideration
63
63
61
Disabled
See bug 1205323
Disabled From version 61: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No Yes Yes
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes No
No
Under consideration
63
63
61
Disabled
See bug 1205323
Disabled From version 61: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Yes Yes Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:host