Default: the slot generates no box

Expected: the two items are laid out as direct children of the dashed container — no extra wrapper box, no extra line box. The 40px padding written on the slot has no effect, because display: contents suppresses the slot's own box and therefore its padding and border too.

one
two

Giving the slot a box of its own

Expected: a solid green box wraps the slotted items, with 12px padding — setting display: block on the slot makes it a real box that the slotted content is placed inside.

one
two

The slot as its own flex container

Expected: the items are laid out in a row by the slot itself, right-aligned with 8px gaps — the slot is display: flex, so the slotted elements are its flex items.

one
two
three

Styling the slot does not style the slotted content

Expected: the yellow background and orange border belong to the slot box alone — the item keeps its own pale-blue background and blue border. But the item's text is letter-spaced: letter-spacing is an inherited property and the slot is the slotted element's parent in the flattened tree.

letter-spaced (inherited)