The assignedSlot
read-only property of the Slottable
interface returns an HTMLSlotElement
representing the <slot>
element the node is inserted in.
Syntax
var slotElement = elementInstance.assignedSlot
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 '
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'assignedSlot' in that specification. |
Living Standard | Initial definition. |
Browser Compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
assignedSlot | Chrome Full support 53 | Edge Full support 79 | Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10.1 | WebView Android Full support 53 | Chrome Android Full support 53 | Firefox Android
Full support
63
| Opera Android Full support 41 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.