v151 · dom · shadow-dom

Manual vs Named Slots (Declarative)

Compare named slot assignment (default) with manual slot assignment set via the declarative <template shadowrootslotassignment="manual"> attribute — the Chrome 151 feature. Manual assignment lets you call slot.assign() to move children programmatically, which named slots can't do.

Named Slots (default)

Children placed via slot="a" / slot="b" attributes. Cannot reorder without changing HTML.

Manual Slots (declarative shadowrootslotassignment="manual")

Children assigned via slot.assign(). Click to rotate.

The declarative attribute

Chrome 151 adds the shadowrootslotassignment attribute to <template>, so you can set manual slot assignment declaratively in HTML — no JS attachShadow call needed:

<template shadowrootmode="open" shadowrootslotassignment="manual"> <slot id="my-slot"></slot> </template>

Before Chrome 151, manual assignment required imperative attachShadow({ slotAssignment: "manual" }). The declarative attribute makes it available in server-rendered HTML.

references