:host styles the host element from inside

Expected: a 120×60 blue-bordered block. An unknown element is inline by default, so :host { display: block } is what gives it a box at all.

Document rules beat :host

Expected: the box below has a green background, not the pale blue set by :host. Rules in the outer document always win over :host rules of the same importance, regardless of specificity.

:host cannot reach outside

Expected: no effect on the page — a descendant selector starting at :host still only matches inside the shadow tree. The light-DOM paragraph after the box keeps its normal size.

light p after the host — must stay normal size and black