In an Angular component's styles, what do :host and :host-context() select, and how does Emulated mode compile them?

## The host element problem An Angular component renders its template **inside** a host element: the element matching its selector, written by the parent, such as `<app-badge>`. That host is not part of the component's template, so an Emulated rule like `app-badge { }` is rewritten to `app-badge[_ngcontent-…]` for the component's own attribute and never matches: the host carries its own host attribute (and, under an emulated parent, the parent's content attribute), not the component's content attribute. Angular borrows two pseudo-classes from the Shadow DOM world to solve this. ## :host and :host(selector) - `:host { display: block; }` styles the host element itself. - `:host(.compact) { padding: 4px; }` styles the host only when the host matches `.compact`, for example because the parent wrote `<app-badge class="compact">`. - `:host .label { }` styles `.label` elements inside the component, anchored at the host. The difference between `:host(.compact)` and `:host .compact` trips people up: the first is a condition **on** the host, the second selects **descendants** with that class. A very common first rule is `:host { display: block; }`. The host is a tag the browser does not recognise, and unknown elements default to `display: inline`, so widths, margins and layout behave oddly until the component gives itself a box. ## :host-context(selector) `:host-context(.theme-dark) h2 { }` applies when the host element **or any of its ancestors** matches `.theme-dark`. This lets a component adapt to context set far above it, typically a theme or density class on `<body>` or an app shell, without every parent passing an input down. The docs describe `:host-context()` as deprecated in modern browsers, yet fully supported by Angular's compiler in Emulated mode, because the compiler replaces it before the browser ever sees it. ## What the compiler emits ```css /* authored */ :host { display: block; } :host(.compact) { padding: 4px; } :host-context(.theme-dark) h2 { color: white; } /* emitted (suffix shortened) */ [_nghost-ng-c1234] { display: block; } .compact[_nghost-ng-c1234] { padding: 4px; } .theme-dark[_nghost-ng-c1234] h2[_ngcontent-ng-c1234], .theme-dark [_nghost-ng-c1234] h2[_ngcontent-ng-c1234] { color: white; } ``` The `:host-context` output has two branches: one where the host itself carries the class, one where an ancestor does. Because the result is plain attribute and class selectors, it follows ordinary specificity, not the special rules of the native pseudo-classes; the docs call this out explicitly. ## Mode matters | Mode | How `:host` / `:host-context()` work | |---|---| | `Emulated` | rewritten by the compiler into `_nghost` attribute selectors | | `ShadowDom` | passed to the browser, evaluated natively inside the shadow root, subject to browser support | | `None` | not rewritten; the component's styles are global, so there is no host scope to anchor to | Emulated mode supports only these two: other Shadow DOM selectors such as `::shadow` and `::part` are not supported. ## Common mistakes - **Writing the tag name.** `app-badge { display: block; }` in the component's own styles is rewritten with the component's content attribute and never matches its host. - **Confusing condition and descent.** `:host(.compact)` asks whether the host has the class; `:host .compact` looks for descendants that have it. - **Expecting `:host-context()` to look only one level up.** It checks the host and every ancestor up to the document root. - **Relying on native specificity rules.** In Emulated mode the compiled attribute selectors follow ordinary specificity, so a specific global rule can still win. - **Porting to `None`.** Under `None` there is no host attribute, so `:host`-based rules lose their anchoring. ## Practical guidance 1. Start most components with `:host { display: block; }` (or `inline-block`, `flex`, `contents` as the design needs). 2. Express variants as `:host(.variant)` so the parent can toggle them with a class on the tag. 3. Use `:host-context()` for ancestor-driven themes; prefer CSS custom properties where the value, not the rule, is what varies. 4. Remember that the parent can style the host box too; decide which side owns layout (usually the parent) and which owns internals (always the component).