ShadowRoot: slotAssignment property
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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()
.
Value
A string that can be one of:
named
-
Elements are automatically assigned to
<slot>
elements within this shadow root. Any descendants of the host with aslot
attribute which matches thename
attribute of a<slot>
within this shadow root will be assigned to that slot. Any top-level children of the host with noslot
attribute will be assigned to a<slot>
with noname
attribute (the "default slot") if one is present. manual
-
Elements are not automatically assigned to
<slot>
elements. Instead, they must be manually assigned withHTMLSlotElement.assign()
.
Examples
In the example below, the assign()
method is used to display the correct tab in a tabbed application. The function is called and passed the panel to show, which is then assigned to the slot. We test if the slotAssignment
is named
to prevent an exception to be raised when HTMLSlotElement.assign()
is called.
function UpdateDisplayTab(elem, tabIdx) {
const shadow = elem.shadowRoot;
// This test is usually not needed, but can be useful when debugging
if (shadow.slotAssignment === "named") {
console.error(
"Trying to manually assign a slot on an automatically-assigned (named) slot",
);
}
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();
}
}
Specifications
Specification |
---|
DOM Standard # dom-shadowroot-slotassignment |
Browser compatibility
BCD tables only load in the browser