Skip to content
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions files/en-us/web/api/htmlslotelement/assign/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,15 @@ browser-compat: api.HTMLSlotElement.assign

The **`assign()`** method of the {{domxref("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()`.

If no slottables are passed into `assign()`, the slot's fallback content is enabled. If there are no manually assigned nodes and `assign()` has not been called, the slots default content will not be enabled.

> [!NOTE]
> You cannot mix manually (imperative) and named (declarative, automatic) slot assignments. Therefore, for this method to work, the shadow tree needs to have been [created](/en-US/docs/Web/API/Element/attachShadow) with the `slotAssignment: "manual"` option.

## Syntax

```js-nolint
assign()
assign(node1)
assign(node1, node2)
assign(node1, node2, /* …, */ nodeN)
Expand All @@ -25,6 +28,7 @@ assign(node1, node2, /* …, */ nodeN)

- `node1`, …, `nodeN`
- : A set of {{domxref("Element")}} or {{domxref("Text")}} nodes.
Passing zero arguments causes the slot's fallback content to be enabled. Failing to call `assign()` with zero arguments after all manually assigned nodes are removed from DOM will _not_ enable the slot's fallback content.

### Return value

Expand All @@ -47,6 +51,8 @@ function UpdateDisplayTab(elem, tabIdx) {
if (panels.length && tabIdx && tabIdx <= panels.length) {
slot.assign(panels[tabIdx - 1]);
} else {
// In case there are no nodes to assign, call `assign()` with zero arguments
// to enable the slot's fallback content.
slot.assign();
}
}
Expand Down