Duplicate IDs and classes do not collide

Expected: the light-DOM line is red on pink; the shadow line is green on pale green. Both carry id="title" class="label", but each tree resolves the names against its own stylesheet.

light DOM #title.label — red on pink

Two shadow trees with the same IDs

Expected: the first box's #x is blue, the second's is orange — identical markup, independent scopes, no interference.

:root and html never match inside a shadow tree

Expected: no red border and no italics on the shadow line. A shadow tree's root is a DocumentFragment, not an element, so :root selects nothing there and html body div.anything cannot reach in from the document either.

light DOM .anything — red border and italics, proving the rules work

:host is the only way up

Expected: the box is pale yellow. Inside a shadow tree, :host is the shadow tree's own root selector; a bare * does not reach the host.