ShadowRoot: slotAssignment property
Baseline2023Newly 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-onlyslotAssignment property of theShadowRoot interface returns theslot assignment mode for the shadow DOM tree. Nodes are either automatically assigned (named) or manually assigned (manual). The value of this property defined using theslotAssignment option when callingElement.attachShadow().
Value
A string that can be one of:
namedElements are automatically assigned to
<slot>elements within this shadow root. Any descendants of the host with aslotattribute which matches thenameattribute of a<slot>within this shadow root will be assigned to that slot. Any top-level children of the host with noslotattribute will be assigned to a<slot>with nonameattribute (the "default slot") if one is present.manualElements are not automatically assigned to
<slot>elements. Instead, they must be manually assigned withHTMLSlotElement.assign().
Examples
In the example below, theassign() 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 theslotAssignment isnamed to prevent an exception to be raised whenHTMLSlotElement.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 # dom-shadowroot-slotassignment |