Slot

A Stack's direct children are its regions — one child, one region. Slot is a grid item, so the Stack sizes and places it (an fr track in ratio, a 25-column span in snap) — but it is one kind of region and not the only one: a nested Stack or a Grid already arranges itself, so it is the region, and because Slot takes className your own box can simply be one. Reach for a plain Slot for the three things nothing else gives you: grouping, positioning, and chrome — a Sleeve goes inside one rather than replacing it.

The three boxes above are each a different nature — auto (sizes to its content), fixed (a definite size), and fill (100% both axes). justify/align position the content inside a slot, and each box only responds where it can: auto on both axes, fixed on both, fill on neither — it's already full. The axes are independent, so you can pin content to the top edge yet let it fill the width. Try it in Properties.

as swaps the element without touching the layout: div (default), article, aside, figure, header, footer, nav, ul, ol — all generic containers, because a Slot must be free at both ends: free in where it sits, since a Stack decides that, and free in what it holds, since a region takes arbitrary content. That rules out a wrong box (<table>, <button>), a wrong content model (<p> and <h1>–<h6> take phrasing content only) and anything with a required parent (<li>, <figcaption>, <td>).

It is a convenience rather than a capability, and worth saying so: any direct child of a Stack is placed, so a bare <ul> already works. What as keeps with it is min-width: 0, the guide overlay and the alignment props — semantics without dropping out of the system.

as a Slot

It swaps a tag; it never generates a sub-structure.

The <ul> is the Slot — it keeps its grid placement, its min-width: 0 and its guide overlay, and a screen reader announces “list, 3 items”. Before as, getting that meant dropping a bare <ul> outside the system and losing all three.

So the <li>s are written by hand. That is also the line between an as value and a component — a table implies four levels of required markup, so Table is a component rather than an as value.

Alignment

Unsuffixed is how my children sit; Self is how I sit in my parent.

The first slot sets the row height. The second uses alignSelf="center" — the slot itself shrinks to its content and centres in the row, so its outline no longer fills the height. The third uses align + justify — the slot still fills the row and its content centres inside it.

The rule covers every primitive, and the axes never swap: justify is always the inline axis and align always the block axis, because this system is CSS grid throughout and never flexbox.