TheassignedSlot read-onlyproperty of theElement interface returns anHTMLSlotElement representing the<slot> element thenode is inserted in.

Value

AnHTMLSlotElement instance, ornull if the element is notassigned to a slot, or if the associated shadow root was attached with itsmode set toclosed (seeElement.attachShadow for further details).

Examples

In oursimple-template example (see it live), we create a trivial custom element example called<my-paragraph> in which a shadow root is attached and then populatedusing the contents of a template that contains a slot namedmy-text.

When<my-paragraph> is used in the document, the slot is populatedby a slottable element by including it inside the element with aslot attributewith the valuemy-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

Browser compatibility