Components & Composition

Composing beyond props

Props pass values down. But real UIs need to pass markup down (a card that wraps arbitrary content), share data across a subtree without drilling props through every level, and run setup when a component mounts. This module covers those composition tools:

• Snippets ({#snippet} / {@render}) — reusable chunks of markup, and Svelte 5’s replacement for the old <slot>.
• Passing UI — how a parent hands markup to a child via the children snippet and named snippet props.
• Context (setContext / getContext) — sharing data down a component tree without prop drilling.
• Lifecycle (onMount / onDestroy / tick) — running code at specific moments.

What this module covers

Lesson	What you’ll learn
Snippets & render	{#snippet} and {@render}, replacing <slot>
Passing UI & children	The children snippet and named snippet props
The context API	setContext / getContext without prop drilling
Lifecycle	onMount, onDestroy, tick, and $effect

flowchart TB
  comp["composing components"] --> snip["snippets: reusable markup"]
  comp --> children["passing UI down as children"]
  comp --> ctx["context: data down a subtree"]
  comp --> life["lifecycle: code at mount / destroy"]

The composition tools

🧡 The one-line takeaway

Beyond passing values with props, Svelte composes UIs with snippets ({#snippet}/{@render} — the Svelte 5 replacement for <slot>), passing markup down via the children snippet, context (setContext/getContext) to share data down a subtree without prop drilling, and lifecycle hooks (onMount/onDestroy/tick) — though $effect now covers most lifecycle needs.

What replaced `<slot>` in Svelte 5?

Props Snippets — `{#snippet}` and `{@render}` Context Stores

What problem does context (`setContext`/`getContext`) solve?

Styling Sharing data down a component tree without drilling props through every level Routing Animation

In Svelte 5, what covers most cases that used lifecycle hooks in Svelte 4?

Stores `$effect` Props Actions

Submit

Mark as complete