What are Svelte slots and named slots?

Answer

Slots allow parent components to inject content into child component templates. Basic slot: <!-- Card.svelte --> <div class="card"><slot /></div>. Parent: <Card><p>Hello</p></Card>. Named slots: multiple injection points: <!-- Modal.svelte --> <div><slot name="header" /><slot /><slot name="footer" /></div>. Parent: <Modal><h2 slot="header">Title</h2><p>Body</p><button slot="footer">Close</button></Modal>. Default slot content: fallback when no content is provided: <slot>Default content</slot>. Slot props: expose data from child to injected content: <slot item={currentItem} />. Parent: <Component let:item><p>{item.name}</p></Component>. In Svelte 5, slots are replaced by snippets ({#snippet} and {@render}) which are more flexible.