The :host Selector
The :host pseudo-class lets you style the custom element itself from inside its own shadow root. There are three forms you’ll use regularly:
:host— always applies to the host element, regardless of context:host(.modifier)— applies only when the host element carries a specific class:host-context(selector)— applies when any ancestor of the host matches the given selector
:host { display: block; }:host(.primary) { background: #3b82f6; }:host-context(.dark-bg) { color: white; }The :host rule is the right place to establish the element’s layout participation — whether it renders as block, inline-block, or flex. Without it, custom elements default to display: inline, which is rarely what you want.
The conditional form :host(.modifier) is the idiomatic way to handle variants (primary, danger, small, large) without JavaScript toggling internal styles. The host’s class list drives the shadow styles.
:host-context(selector) is useful for automatic theming: a component can adapt to a dark-mode ancestor class without the page needing to know the component’s internals.