::slotted() — styling projected light DOM

Expected: the top-level <span> is bold and blue. The <b> is not (wrong element), and the nested <span> inside the third item is not styled either — ::slotted() matches only the top-level assigned nodes, never their descendants.

slotted span — bold blue slotted b — plain
wrapper nested span — plain, not slotted

Compound and named-slot variants

Expected: only the item carrying class="hi" is highlighted; the title slot's rule gives its content a larger size.

big title plain item highlighted item last item — underlined

Light DOM styles still win over ::slotted()

Expected: the item stays red. Slotted nodes belong to the document, so document rules beat the shadow tree's ::slotted() rules at equal importance.

red, not blue