Logo

dev-resources.site

for different kinds of informations.

From Svelte 4 to Svelte 5: Understanding Slots (default and named)

Published at
12/26/2024
Categories
svelte
javascript
tutorial
webdev
Author
digitaldrreamer
Categories
4 categories in total
svelte
open
javascript
open
tutorial
open
webdev
open
Author
15 person written this
digitaldrreamer
open
From Svelte 4 to Svelte 5: Understanding Slots (default and named)

There are a lot of changes that might be confusing in Svelte 5, which is why I'm trying to document my learning process from Svelte 4 to Svelte 5.
One of them is using slots in Svelte 5. It was a much more straightforward process in <= Svelte 4:

Default Slots

Parent.svelte (default slots, svelte 4)

<Child>
<div>
// Your slot content
</div>
</Child>
Enter fullscreen mode Exit fullscreen mode

Child.svelte (default slot, svelte 4)

<slot />
Enter fullscreen mode Exit fullscreen mode

In Svelte 5, you need to use the @render syntax to render the slot, which you also take from the new $props():

Parent.svelte (default slots, svelte 5)

<!-- same as svelte 4 -->
<Child>
<div>
// Your slot content
</div>
</Child>
Enter fullscreen mode Exit fullscreen mode

Child.svelte (default slot, svelte 5)

<script>
// destructure children from $props()
const { children } = $props()
</script>
<!-- render default slot here (with optional chaining just in case)-->
{@render children?.()}
Enter fullscreen mode Exit fullscreen mode

Named Slots

Named slots have also changed, using both #snippet and @render syntaxes:

Parent.svelte (named slots, svelte 4)

<Child>
<div slot="mySlot">
// Your slot content
</div>
</Child>
Enter fullscreen mode Exit fullscreen mode

Child.svelte (named slot, svelte 4)

<slot name="mySlot" />
Enter fullscreen mode Exit fullscreen mode

In Svelte 5, you need to pass the slot with #snippet, then use the @render syntax to render the slot, which you also take from the new $props():

Parent.svelte (named slots, svelte 5)

<!-- same as svelte 4 -->
<Child>
{#snippet mySlot()}
<div>
// your slot content
</div>
{/snippet}
</Child>
Enter fullscreen mode Exit fullscreen mode

Child.svelte (named slot, svelte 5)

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
<!-- render default slot here-->
{@render mySlot()}
Enter fullscreen mode Exit fullscreen mode

Extras: You can also conditionally render content based on if a slot is passed with an if block:

Child.svelte (named slot, svelte 5, conditional render)

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
{#if mySlot}
<p>My Slot Section is rendered here</p>
<!-- render default slot here-->
{@render mySlot()}
{/if}
Enter fullscreen mode Exit fullscreen mode

I'll keep documenting any changes as I come across them. By the way, what do you think of Svelte 5? Is the increase in compile time, the reduction in build size (for larger projects), and the extra features worth the added complexity?

Happy Hacking!

svelte Article's
30 articles in total
Favicon
🚀 I have released Eurlexa!!! EU Regulation at Your Fingertips!
Favicon
Building "Digital DSA": The Journey of Crafting a Smarter Loan Comparison Platform
Favicon
Tower defense clicker game built with Svelte 5, without canvas. Only CSS transitions and the power of Runes
Favicon
Optimize SvelteKit performance with brotli compression
Favicon
Migrating the VSCode theme generator to oklch
Favicon
Beatbump: Exploring Svelte Best Practices for Dynamic Web Applications
Favicon
SvelteJs vs ReactJs : But both can co-exists!
Favicon
Build a Simple Chatbot with Svelte and ElizaBot
Favicon
A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 2)
Favicon
The Perfect Trio: Wails, Go & Svelte in Action
Favicon
Svelte 5: Share state between components (for Dummies)
Favicon
Integrating SvelteKit with Storyblok (Using Svelte 5)
Favicon
Changelog 2024/48 aka We 🖤 Svelte 5
Favicon
My first Micro SaaS | Automated, SEO-friendly Changelogs
Favicon
Quit Using Anonymous Functions in Props!
Favicon
From Svelte 4 to Svelte 5: Understanding Slots (default and named)
Favicon
Make EditorJS work in Svelte(kit) SSR
Favicon
Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.
Favicon
A short guide to Async Components in Svelte 5
Favicon
New Post here!🍻
Favicon
Svelte vs Vue: Choosing the Best Front-End Framework
Favicon
Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation
Favicon
Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung
Favicon
ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development
Favicon
Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI
Favicon
Svelte
Favicon
A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 1)
Favicon
When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte
Favicon
Deploying Your SvelteKit App to GitHub Pages with a Custom Domain (Ditch GoDaddy for Porkbun)
Favicon
Syncing DOM State and Data without IDs

Featured ones: