Slot basics (default slot) in Svelte - Mini Project: Build & Apply

Slot basics (default slot)

📖 Scenario: You are building a simple Svelte component that can display a message inside a box. You want to allow users of your component to put any content inside this box using Svelte's default slot feature.

🎯 Goal: Create a Svelte component called MessageBox.svelte that uses a default slot to display any content passed inside it. Then use this component in an App.svelte file to show a message inside the box.

📋 What You'll Learn

Create a Svelte component named MessageBox.svelte with a default slot

Use a <slot> tag inside a container element in MessageBox.svelte

Create an App.svelte file that imports MessageBox.svelte

Use the <MessageBox> component in App.svelte and pass some text inside it

Ensure the text inside <MessageBox> appears inside the box

💡 Why This Matters

🌍 Real World

Default slots let you create reusable UI components that can display any content inside them, like cards, modals, or message boxes.

💼 Career

Understanding slots is key for building flexible, maintainable components in Svelte, a popular modern frontend framework.

1

Create the MessageBox component with a container

Create a Svelte component file named MessageBox.svelte. Inside it, write a <div> element with a class box to act as a container.

Svelte

Need a hint?

Use the <slot> tag inside the <div> to allow content insertion.

2

Add basic styling to the MessageBox container

In MessageBox.svelte, add a <style> block below the HTML. Inside it, style the .box class with a border of 2px solid black, padding of 1rem, and a max-width of 20rem.

Svelte

  



  /* Your code here */

Need a hint?

Use CSS inside the <style> block to style the container.

3

Create the App component and import MessageBox

Create a new Svelte component file named App.svelte. Import the MessageBox component from ./MessageBox.svelte at the top of the file.

Svelte

import MessageBox from './MessageBox.svelte';

Need a hint?

Use the import statement and then use the component as a tag.

4

Use the MessageBox component with default slot content

In App.svelte, write the <MessageBox> component with the text Hello, this is a message inside the box! placed between the opening and closing tags. This text should appear inside the box when rendered.

Svelte

import MessageBox from './MessageBox.svelte';

Need a hint?

Put the message text inside the <MessageBox> tags to use the default slot.