:host() — conditional on the host's own attributes

Expected, left to right: a grey badge (no class), a green badge (.ok), a red badge (.err), and a wide badge ([size=wide], 160px).

:host-context() — conditional on an ancestor

Note: :host-context() ships in Chromium but not in Firefox or WebKit, so a reference browser may legitimately render both panels alike. Treat this section as informative, not as a conformance failure.

Expected: the first panel is dark text on white; the identical second panel, because it sits inside .dark-page, flips to light text on a dark background. Same shadow tree, different context.