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 to 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
:host
Examples
Styling the shadow host
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 { 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 1The definition of ':host' 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:host
|
Chrome
Full support 54 |
Edge
Full support 79 |
Firefox Full support 63 Full support 63 No support 61 — 63 Disabled' From version 61 until version 63 (exclusive): this feature is behind the |
IE
No support No |
Opera
Full support 41 |
Safari
Full support 10 |
WebView Android
Full support 54 |
Chrome Android
Full support 54 |
Firefox Android Full support 63 Full support 63 No support 61 — 63 Disabled' From version 61 until version 63 (exclusive): this feature is behind the |
Opera Android
Full support 41 |
Safari iOS
Full support 10 |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
:host by Mozilla Contributors is licensed under CC-BY-SA 2.5.