Syntax
<slot name="heading">Fallback heading</slot>
<h2 slot="heading">Custom heading</h2>Examples
Slots in a Shadow DOM Component: working example
Save as an HTML file and open it in a browser. Expected result: A bordered card displays the Delivery heading and paragraph using named and default slots.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
</head>
<body>
<info-card>
<h2 slot="heading">Delivery</h2>
<p>Arrives in three working days.</p>
</info-card>
<script>
customElements.define("info-card", class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = `<style>:host { display: block; border: 1px solid; padding: 1rem; }</style><slot name="heading">Information</slot><slot></slot>`;
}
});
</script>
</body>
</html>- Expected result: A bordered card displays the Delivery heading and paragraph using named and default slots.
- The h2 is assigned to the heading slot while the paragraph uses the unnamed slot.
- The shadow template is a constant authored string; user content remains in light DOM.
Best practices
- Give custom elements a hyphenated name.
- Design useful fallback slot content and avoid injecting untrusted HTML into the shadow template.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<slot>
Desktop
- Chrome
- Supported
From 53 - Firefox
- Supported
From 63 - Safari
- Supported
From 10 - Edge
- Supported
From 79 - Opera
- Supported
From 40
Mobile
- Safari on iOS
- Supported
From 10 - Chrome for Android
- Supported
From 53 - Firefox for Android
- Supported
From 63 - Samsung Internet
- Supported
From 6.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 53
Firefox
- From 63
Safari
- From 10
Edge
- From 79
Opera
- From 40
Safari on iOS
- From 10
Chrome for Android
- From 53
Firefox for Android
- From 63
Samsung Internet
- From 6.0
<slot> name
Desktop
- Chrome
- Supported
From 53 - Firefox
- Supported
From 63 - Safari
- Supported
From 10 - Edge
- Supported
From 79 - Opera
- Supported
From 40
Mobile
- Safari on iOS
- Supported
From 10 - Chrome for Android
- Supported
From 53 - Firefox for Android
- Supported
From 63 - Samsung Internet
- Supported
From 6.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 53
Firefox
- From 63
Safari
- From 10
Edge
- From 79
Opera
- From 40
Safari on iOS
- From 10
Chrome for Android
- From 53
Firefox for Android
- From 63
Samsung Internet
- From 6.0
slot
Desktop
- Chrome
- Supported
From 53 - Firefox
- Supported
From 63 - Safari
- Supported
From 10 - Edge
- Supported
From 79 - Opera
- Supported
From 40
Mobile
- Safari on iOS
- Supported
From 10 - Chrome for Android
- Supported
From 53 - Firefox for Android
- Supported
From 63 - Samsung Internet
- Supported
From 6.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 53
Firefox
- From 63
Safari
- From 10
Edge
- From 79
Opera
- From 40
Safari on iOS
- From 10
Chrome for Android
- From 53
Firefox for Android
- From 63
Samsung Internet
- From 6.0
Element.attachShadow
Desktop
- Chrome
- Supported
From 53 - Firefox
- Supported
From 63 - Safari
- Supported
From 10 - Edge
- Supported
From 79 - Opera
- Supported
From 40
Mobile
- Safari on iOS
- Supported
From 10 - Chrome for Android
- Supported
From 53 - Firefox for Android
- Supported
From 63 - Samsung Internet
- Supported
From 6.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 53
Firefox
- From 63
Safari
- From 10
Edge
- From 79
Opera
- From 40
Safari on iOS
- From 10
Chrome for Android
- From 53
Firefox for Android
- From 63
Samsung Internet
- From 6.0
CustomElementRegistry.define
Desktop
- Chrome
- Supported
From 54 - Firefox
- Supported
From 63 - Safari
- Supported
From 10.1 - Edge
- Supported
From 79 - Opera
- Supported
From 41
Mobile
- Safari on iOS
- Supported
From 10.3 - Chrome for Android
- Supported
From 54 - Firefox for Android
- Supported
From 63 - Samsung Internet
- Supported
From 6.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 54
Firefox
- From 63
Safari
- From 10.1
Edge
- From 79
Opera
- From 41
Safari on iOS
- From 10.3
Chrome for Android
- From 54
Firefox for Android
- From 63
Samsung Internet
- From 6.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.