Svelte Interview Questions and Answers

Slots let a parent pass markup into a child. A default slot is placed with slot in the child and any children of the parent's component tag fill it. Named slots use slot name="header" in the child and slot="header" on the parent element. Slot props let the child pass data back up to the parent's slot content.

<!-- List.svelte -->
<ul>
  {#each items as item}
    <li><slot {item} /></li>
  {/each}
</ul>

<List {items} let:item><a href={item.url}>{item.name}</a></List>

$$slots lets a component detect which slots were provided so it can render fallbacks, and slots are lazy, so unused slot content is never rendered.

Svelte 5 replaces slots with snippets and the {@render} tag plus $props().children. Snippets are more flexible because they can be passed as normal values and reused. Either way, slots and snippets are how Svelte achieves composition without inheritance.

Svelte components have a small lifecycle API. onMount runs once after the component is first rendered in the browser. It does not run during SSR, so it is the place for DOM measurement, subscriptions or fetching browser-only data, and it can return a cleanup function. onDestroy runs when the component is removed, for clearing timers or unsubscribing. beforeUpdate and afterUpdate fire before and after the DOM is patched.

<script>
  import { onMount, tick } from 'svelte';
  let el;
  onMount(() => { el.focus(); return () => console.log('bye'); });
  async function focusSoon() { await tick(); el.focus(); }
</script>

tick() returns a promise that resolves after pending state changes have been applied to the DOM, so it guarantees the DOM reflects your latest assignment. Multiple onMount calls are allowed and cleanups run in reverse order. In Svelte 5, $effect largely replaces onMount and afterUpdate.