Element: assignedSlot property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The assignedSlot read-only property of the Element interface returns an HTMLSlotElement representing the <slot> element the node is inserted in.
Value
An HTMLSlotElement instance, or null if the element is not assigned to a slot, or if the associated shadow root was attached with its mode set to closed (see Element.attachShadow for further details).
Examples
In our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text.
When <my-paragraph> is used in the document, the slot is populated by a slottable element by including it inside the element with a slot attribute with the value my-text. Here is one such example:
<my-paragraph> <span slot="my-text">Let's have some different text!</span> </my-paragraph> In our JavaScript file we get a reference to the <span> shown above, then log a reference to the original <slot> element the <span> was inserted in.
let slottedSpan = document.querySelector("my-paragraph span"); console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">' Specifications
| Specification |
|---|
| DOM # dom-slotable-assignedslot |