The assignedSlot
read-only property of the Element
interface returns an HTMLSlotElement
representing the <slot>
element the node is inserted in.
The assignedSlot
read-only property of the Element
interface returns an HTMLSlotElement
representing the <slot>
element the node is inserted in.
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).
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:
html
<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.
js
let slottedSpan = document.querySelector("my-paragraph span"); console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'
Specification |
---|
DOM Standard # dom-slotable-assignedslot |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
assignedSlot |
53 | 79 | 63 | No | 40 | 10 | 53 | 53 | 63 | 41 | 10 | 6.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/assignedSlot