Course

Up and running with Svelte 3

1
WTF is Svelte?
1m 7s
2
Create a new project with Svelte 3
33s
3
Add data to HTML markup using Svelte 3
35s
4
Add styles to Svelte 3 component
48s
5
Create a new Svelte 3 component to render it inside of another component
1m 16s
6
Declare and pass in properties to a Svelte 3 component
1m 18s
7
Compose components with slots in Svelte 3
1m 18s
8
Use named slots to compose multiple components in Svelte 3
1m 45s
9
Render HTML directly into a component in Svelte 3
46s
10
Use Svelte 3 transitions to gracefully show and hide DOM elements
1m 39s
11
Use reactive declarations to compute component state in Svelte 3
1m 27s
12
Loop over and render a list of data using an `each` block in Svelte 3
1m 15s
13
Use await block to wait for a promise and handle loading state in Svelte 3
1m 23s
14
Use DOM events and event modifiers in Svelte 3
1m 22s
15
Use an onMount lifecycle method to fetch and render data in Svelte 3
1m 4s
16
Use Svelte 3 stores to share data between multiple unrelated components
1m 44s
17
Set a value to a Svelte 3 store
45s
18
Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores
1m 17s
19
Tween a value and dynamically update the DOM with Svelte 3
1m 32s
20
Create a new Svelte project with TypeScript support
3m 35s

Compose components with slots in Svelte 3

InstructorTomasz Łakomy

Share this video with your friends

Send Tweet

Published 5 years ago

Updated 4 years ago

When creating an app out of components we tend to compose them inside of one another. Svelte allows us to create slots using a <slot /> component so the components we create can accept any children and render those.

In this lesson we are going to see an example of a slot being used to create a generic box component which can accept any children as a prop, along with handling a case where no children were provided.

View code for this lesson

Up and running with Svelte 3

Compose components with slots in Svelte 3

Social Share Links