The slot
property of the Element
interface returns the name of the shadow DOM slot the element is inserted in.
A slot is a placeholder inside a web component that users can fill with their own markup (see Using templates and slots for more information).
Syntax
var aString = element.slot element.slot = aString
Value
A DOMString
.
Examples
In our simple-template example ([[../../../../../../../mdn.github.io/web-components-examples/simple-template/index|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 name of the corresponding <slot>
element.
let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.slot); // logs 'my-text'
Specifications
Specification | Status | Comment |
DOMThe definition of 'slot' in that specification. | Living Standard |
Browser Compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
slot
|
Chrome
Full support 53 |
Edge
Full support 79 |
Firefox
Full support 63 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 10 |
WebView Android
Full support 53 |
Chrome Android
Full support 53 |
Firefox Android
Full support 63 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
Element.slot by Mozilla Contributors is licensed under CC-BY-SA 2.5.