Widely available Supported across all major browsers. Safe to use in production.

Imperative slot assignment

The assign() method of the HTMLSlotElement interface sets the slot's manually assigned nodes to an ordered set of slottables. The manually assigned nodes set is initially empty until nodes are assigned using assign().

Web Components

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
assign
92
92
92
16.4
92
16.4
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 
function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;
  const slot = shadow.querySelector("slot");
  const panels = elem.querySelectorAll("tab-panel");
  if (panels.length && tabIdx && tabIdx <= panels.length) {
    slot.assign(panels[tabIdx - 1]);
  } else {
    slot.assign();
  }
}

Use cases

  • Using Imperative slot assignment

    The assign() method of the HTMLSlotElement interface sets the slot's manually assigned nodes to an ordered set of slottables.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links