Inside a shadow root's own stylesheet, what do the :host and :host-context() selectors match, and why can't the component just write its own tag name as the selector instead?

## Why the tag name does not work Selector matching in a shadow tree is scoped to that tree. A rule written inside the root can only match nodes in the root. The host element belongs to the *outer* tree — the shadow root hangs off it, but it is not inside it — so a bare `my-card { ... }` rule inside the root has nothing to match. Meanwhile the same rule written in the *document* stylesheet does match the host, because the host is an ordinary element out there. That asymmetry is the whole reason a dedicated selector exists. ```css /* inside the shadow root */ my-card { display: block } /* matches nothing */ :host { display: block } /* matches the host */ ``` The `display` line is not a toy example. An unknown or custom element defaults to `display: inline`, so a component that never sets `display` on itself will collapse around its content and ignore width and height. Setting it via `:host` is the standard first rule in a component's stylesheet. ## The three forms **`:host`** — matches the shadow host, but *only* when the rule appears in a stylesheet inside that host's shadow tree. Used in a document stylesheet it matches nothing. **`:host(<compound-selector>)`** — matches the host only if the host itself also matches the argument. This is how a component exposes state and variants to its consumer: ```css :host { display: inline-flex; opacity: 1 } :host([disabled]) { opacity: .5; pointer-events: none } :host(.compact) { padding: 2px 6px } ``` The page writes `<my-button disabled>` or adds a class, and the internal stylesheet reacts — no JavaScript involved. The argument is a *compound* selector applied to the host, not a descendant selector. **`:host-context(<compound-selector>)`** — matches the host if the host *or any of its ancestors* in the flattened tree matches the argument. It lets a component detect the environment it was dropped into: ```css :host-context(.dark) { background: #111; color: #eee } ``` Support for `:host-context()` is genuinely uneven — Chromium implements it, Firefox does not — so a component that relies on it alone will look wrong in some browsers. The portable alternative is to let the page hand the information down explicitly, either as an attribute on the host or as a CSS custom property inherited from an ancestor. ## Specificity and the cascade Two details trip people up. *Specificity.* `:host` counts as a pseudo-class, so it has specificity (0,1,0). `:host(.compact)` adds the compound's specificity, giving (0,2,0). Nothing exotic — it competes with ordinary selectors on ordinary terms *within the same tree*. *Cross-tree cascade.* When a declaration from the outer document and a declaration from the shadow tree both apply to the host and neither is `!important`, **the outer document wins**, regardless of specificity. That is the platform deliberately letting the page have the last word about the element it placed. Flip on `!important` and the order reverses: an important declaration from the shadow tree beats an important one from the document. Concretely: ```css /* document */ my-card { color: blue } /* shadow root */ :host { color: red } /* result: blue */ ``` Candidates who expect `:host` to win here are reasoning from specificity alone and missing the cross-tree rule. ## Practical shape of a component stylesheet A well-formed component stylesheet usually opens with the host block and then styles internals: ```css :host { display: block; box-sizing: border-box; } :host([hidden]) { display: none } /* restore the hidden attribute */ .body { padding: 12px } ``` The `:host([hidden])` line matters more than it looks: once you set `display: block` on `:host`, you have overridden the user-agent rule that makes `[hidden]` work, and the element will stay visible when the page sets `hidden`. Restoring it is a small, very commonly missed correctness detail — and a good thing to volunteer in an interview, because it shows you have actually shipped a component rather than read about one. ## What these selectors do not do `:host` styles the host itself; it does not reach the component's internals from outside, and it does not give the page a way in. Styling that crosses the boundary in the other direction is a separate mechanism entirely. Keep the direction straight: `:host` is a component looking *outward at itself*, from inside its own tree.