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
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
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😎
