Widely availableUseful for advanced component composition, but keep simpler named slots when they already model the layout clearly.
Web Components Widely available

Imperative slot assignment

Imperative slot assignment gives JavaScript direct control over which slotted content ends up in which part of a component. It helps when static slot names are not expressive enough for the component's composition rules.

Web ComponentsSlotsComposition

Overview

Imperative slot assignment gives JavaScript direct control over which slotted content ends up in which part of a component. It helps when static slot names are not expressive enough for the component's composition rules.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLSlotElement.assign
92
92
92
16.4
92
16.4
DOM API
slotAssignment

The read-only slotAssignment property of the ShadowRoot interface returns the slot assignment mode for the shadow DOM tree. Nodes are either automatically assigned (named) or manually assigned (manual). The value of this property defined using the slotAssignment option when calling Element.attachShadow().
86
86
92
16.4
86
16.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 4 item(s)
Implementation note
  • Before Chrome 95, the method accepted any `Node` instead of just `Element` and `Text`.
  • Accepted `sequence<Node>` instead of `(Element or Text)...`.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (92)
Notes 4 item(s)
Implementation note
  • Before Edge 95, the method accepted any `Node` instead of just `Element` and `Text`.
  • Accepted `sequence<Node>` instead of `(Element or Text)...`.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (92)
Notes 4 item(s)
Implementation note
  • Before Chrome Android 95, the method accepted any `Node` instead of just `Element` and `Text`.
  • Accepted `sequence<Node>` instead of `(Element or Text)...`.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (92)

Syntax

JAVASCRIPT 
const shadow = host.attachShadow({ mode: 'open', slotAssignment: 'manual' });
shadow.innerHTML = '<slot></slot>';
const slot = shadow.querySelector('slot');
slot.assign(host.querySelector('.item'));

Live demo

Named slots

Assign content to named slots inside a reusable card component.

PreviewFullscreen

Fallback content

Use slot fallback content when the host does not provide a named assignment.

PreviewFullscreen

Dynamic reassignment

Move existing elements between slots to change layout without rebuilding the host element.

PreviewFullscreen

Use cases

  • Dynamic layout regions

    Assign children into panels, headers, or side areas based on runtime rules instead of hard-coded markup structure.

  • Adaptive component layouts

    Change where projected content appears when the component switches between compact and expanded modes.

Cautions

  • Imperative slotting can make component structure harder to inspect, so document the assignment rules clearly.
  • If the layout is mostly static, named slots remain easier to read and maintain.

Accessibility

  • Moving content between slots must preserve reading order, heading relationships, and control associations.
  • Avoid slot logic that surprises assistive technology users by changing structure without a visible reason.

Related links

Powered by web-features