profile

Hi! I'm a Creator.

Weekly Svelte newsletter: What is a slot in Svelte ? (I)

published5 months ago
1 min read

What is a Slot in Svelte #1

Hello guys

We have started a series of tips on using Svelte and this is the the first of those series.

So today we are going to learn about Slot.

What we are going to cover

  • What is Slot?
  • How to use it

What is Slot?

A slot is a component that allows components to contain other components or HTML elements. What this means is let’s say we want to build a card component and that Card component should accept all types of children props, that’s where Slot comes to our rescue in svelte. Let’s dive into code so you will understand better.

How to use Slot.

Now we are going to build a simple Card component that we are going to use across our application.

Code

Slot code
Slot code

The code above is just a div that has a class of card just for styling purposes, but if you take a closer look you will see us using the <slot></slot> inside of the div. Now, what we are doing here is to tell this card component to accept any HTML, and any other child component passed into it.

Now let’s write some code that makes use of the card component in the App.svelte

Code

Slot code
Slot code

Question of The Week

Would you like to know more about Slot ?

Watch out for the second part of this article.

Talk to ya soon!

Built With ❤️

SvelteUI

Follow us on our social media platforms for more tips😎

facebookinstagramtwitter