v151 · dom · shadow-dom

Declarative Shadow DOM: shadowrootslotassignment attribute

The <template shadowrootmode="open" shadowrootslotassignment="manual"> attribute lets declarative shadow roots use manual slot assignment — previously only available via attachShadow({slotAssignment: "manual"}). Components that need programmatic slot assignment can now be fully declarative.

concepts

  1. Manual vs Named Slots

    Side-by-side comparison: a component with named slots (default named assignment) and one with shadowrootslotassignment="manual". Drag children between slots and observe how manual assignment requires assign() while named relies on slot attributes.

  2. Feature Detection Probe

    Probe whether the browser parses the shadowrootslotassignment attribute on a declarative shadow root template, and read back the shadow root's slotAssignment mode live.

why it shipped

Manual slot assignment gives component authors precise control over which children render in which slot at runtime — essential for reorderable lists, tab panels, and data grids. Until now, components using slotAssignment: "manual" couldn't be declaratively parsed from HTML; they required JavaScript to attach the shadow root. This attribute closes that gap.

references