How to use Slot in Svelte

Svelte provides many ways for components to communicate with each other, including props, slots, etc. You need to integrate slots to create flexible and reusable components in your Svelte application.

What are slots in Svelte?

Slots in the Svelte framework work similarly to slots in Vue. They provide a way to pass content from the parent component to the child. With slots, you can define placeholders in a component's template, where you can insert content from the parent component.

This content can be plain text, HTML markup, or another Svelte element. Working with slots allows you to create highly flexible and customizable components that meet different uses.

Create basic slots

To create slots in Svelte, use the slot component in a component template. The slot is the placeholder for the content you will pass from the parent element. By default, this slot will display any content moved into it.

Here's an example of how to create a basic slot:

 This is the child component 

The above code block shows the child component using slots to get content from the parent component.

To pass content from a parent component to a child component, you first import the child component into the parent component. Then, instead of using a self-closing tag to show the child element, use an opening and closing tag. Finally, in the component's tag, write the content you want to pass from the parent-to-child component.

For example:

 This is the parent component This is a message from the parent component 

In addition to passing content from parent-to-child components, you can provide fallback/default content in the slot. This is the content that the slot would display if the parent component did not pass any content.

Here's how you can fallback content:

 This is the child component Fallback Content 

This block of code provides the text 'Fallback Content' as fallback content for the display slot if the parent component has no content.

Transfer data through slots using slot prop

Svelte allows you to pass data to slots using slot props. You use slot props in situations where you want to pass some data from the child component to the content being included.

For example:

 This is the child component 

The code block above shows a Svelte component. In the script tag, you declare the variable message and assign the text "Hello Parent Component!" for it. You also pass the message variable to the slot message property. This makes the message data available to the parent component when it injects content into this location.

 This is the parent component The child component says {message} 

The let:message syntax allows the parent component to access the message slot property provided by the child component. The div tag's message variable is the data from the slot message property .

Note that, you are not limited to a single slot attribute, you can pass multiple slot attributes as required.

 This is the child component 

In the root component:

 This is the parent component The user's name is {firstName} {lastName} 

Work with named slots

You can use named slots when you want to move multiple slots within a component. Naming makes it easier to manage slots because you can give each slot a unique name. With named slots, you can build complex components with different layouts.

To create a named slot, pass the name attribute to the slot element :

 This is the child component

Headers:

Footer:

In this example, you have two named slots, header and footer slots . Using this slot property, you can pass content into each slot from the parent component.

For example:

 This is the parent component This will be passed to the header slot This will be passed to the footer slot 

This code shows how to use the slot attribute to pass content to a named slot. In the first span tag, you pass the slot attribute with the value header . This ensures that the text in the span tag will appear in the header slot . Similarly, text in the span tag with the value of the slot footer attribute will appear in the footer slot.

What is slot forwarding?

Slot forwarding is a feature in Svelte that allows you to pass content from a parent component through a wrapper into a child component. This is useful in situations where you want to move content from unrelated components.

Here's an example of how to use a slot transition, first, create a child element:

 This is the child component 

Next, create the surrounding element:

In this block of code, you are passing a slot with a different name into the child component's message slot.

Then, in the parent component, write the code:

 This is the parent component This is from the parent component 

In the above structure, the content "This is from the parent component" is passed through the wrapper component and directly into the child component thanks to the wrapperMessage slot in the surrounding component.

Overall, slots are a powerful feature in Svelte, allowing you to create highly reusable and customizable components. Hope this article helps you know how to use slots in Svelte.

Jessica Tanner

Update 07 October 2023