<slot>
The slot element is a placeholder inside a web component shadow tree where light-DOM children are projected.
Syntax
<slot name="..."></slot>Examples
<template shadowrootmode="open">
<h2><slot name="title">Default title</slot></h2>
<slot></slot>
</template>
Output
Projects the host's slot="title" content into the heading and remaining children into the default slot, falling back to "Default title" when empty.
Notes
Used inside shadow DOM. Named slots match host elements with a matching slot attribute; the unnamed slot catches everything else. Style projected nodes with ::slotted().
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 53 |
| firefox | 63 |
| safari | 10.1 |
| edge | 79 |