Slotable.assignedSlot

The assignedSlot read-only property of the Slotable 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 slotable 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 Status Comment
Unknown
The definition of 'assignedSlot' in that specification.
Unknown Initial definition.

Browser Compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support53 No1

592

Yes — 593

No4010.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5353 No1

592

Yes — 593

4010.16.0

1. Under consideration

2. From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Document Tags and Contributors

 Contributors to this page: ExE-Boss, chrisdavidmills
 Last updated by: ExE-Boss,