Usage
div with display: contents. Its children are laid out by the nearest box-generating ancestor, as if Contents were not there. Use it only when an element must exist in the DOM without changing layout.
| Need | Use |
|---|---|
A ref to observe, measure or portal into, around children that a parent FlexBox or Grid must still lay out | Contents with ref |
A data-* hook (a test id, a tracking label, a mount marker) around children that the parent must still lay out | Contents with data-* |
| Group children with no element at all | A fragment |
| Children need gap, padding, alignment, size or paint | Box, FlexBox or Grid with props |
One child that is already a Box, FlexBox or Grid | Put the ref and data-* on that child |
| Semantics: a list, a landmark, a heading, a labelled group | A Box with as, or the shipped component |
FlexBox, and its gap applies between them.
Contents accepts children, ref and data-* attributes, nothing else. There is no className, style, regionClass, as, Box layout prop, role, aria-*, id, tabIndex or event handler. Each is declared never, so passing one is a type error even through a spread. Contents generates no box, so there is nothing to lay out or paint; regionClass stays on Box and FlexBox.
design-system/contents-layout-transparent fails when Contents:
children, key, ref or data-*, or a spread;ref nor a data-* attribute (use a fragment);Box, FlexBox, Grid or Contents (put the ref and data-* on that element).