Host
The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
Overview
The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 54 | 79 | 63 | 10 | 54 | 10 | |
| Other | ||||||
| `:host()` | 54 | 79 | 63 | 10 | 54 | 10 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
Notes 1 item(s)
Implementation note
- Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
Syntax
CSS
:host {
display: block;
border: 1px solid #ccc;
}
:host(.active) {
border-color: blue;
}Live demo
Use cases
Using Host
The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features