Slot fallback content in Svelte - Mini Project: Build & Apply

Using Slot Fallback Content in Svelte

📖 Scenario: You are building a reusable Card component in Svelte that can display custom content inside it. Sometimes, the user of the component might not provide any content. To handle this, you want to show a default message inside the card when no content is passed.

🎯 Goal: Create a Svelte Card component that uses a <slot> with fallback content. This fallback content should display the text "No content provided" when no content is passed to the slot.

📋 What You'll Learn

Create a Svelte component named Card.svelte with a <slot> element.

Add fallback content inside the <slot> that says No content provided.

Use the Card component in an App.svelte file twice: once with custom content and once without any content.

Ensure the fallback content appears only when no slot content is passed.

💡 Why This Matters

🌍 Real World

Slot fallback content is useful when building reusable UI components that can show default messages or placeholders if no custom content is provided by the user.

💼 Career

Understanding slots and fallback content is important for frontend developers working with Svelte or other component-based frameworks to create flexible and user-friendly components.

1

Create the Card component with a slot

Create a Svelte component file named Card.svelte. Inside it, write a <div> with class card and place an empty <slot> element inside it.

Svelte

Need a hint?

Use the <slot> tag inside the div with class card.

2

Add fallback content inside the slot

Inside the Card.svelte component, add fallback content inside the <slot> element that says No content provided. This text should appear if no content is passed to the slot.

Svelte

Need a hint?

Place the fallback text between the opening and closing <slot> tags.

3

Use the Card component with custom content

Create an App.svelte file. Import the Card component. Use the <Card> component once with the content <p>Hello, Svelte!</p> inside it.

Svelte

  // Import Card component here

Need a hint?

Use import Card from './Card.svelte' and place <p>Hello, Svelte!</p> inside the <Card> tags.

4

Use the Card component without content to show fallback

In the same App.svelte file, add another <Card> component without any content inside it. This should display the fallback text No content provided inside the card.

Svelte

  import Card from './Card.svelte';



  Hello, Svelte!

Need a hint?

Add a second <Card> component with no children to show fallback content.