Web Components & Shadow DOM

:host {
  display: block;
  border: 1px solid #ccc;
}

:host(:hover) {
  border-color: blue;
}

:host([disabled]) {
  opacity: 0.5;
}

To select the parent document
To style the component's root element
The :host selector in Shadow DOM CSS allows styling of the component's root element (custom element) by: 1) Targeting the shadow host element itself, 2) Supporting pseudo-classes for interactive states, 3) Allowing attribute-based styling, 4) Providing a way to style the component container from within the Shadow DOM. This is essential for creating components that can adapt to different contexts while maintaining encapsulation.
To target nested components
To select all child elements