🔥 Svelte / SvelteKit
Intermediate
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.
More Svelte / SvelteKit Questions
View all →- Intermediate What are Svelte custom stores and the store contract?
- Intermediate How does SSR (Server-Side Rendering) work in SvelteKit?
- Intermediate What are SvelteKit adapters?
- Intermediate What is the difference between prerendering, SSR, and CSR in SvelteKit?
- Intermediate How do you manage environment variables in SvelteKit?