The :host()CSSpseudo-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;
}

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.

Disabled From version 61 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Disabled From version 61 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.