Slot basics (default slot) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component with a default slot?

Consider the following Svelte component usage:

<Card>Hello, world!</Card>

And the Card.svelte component code:

<div class="card">
  <slot>Default content</slot>
</div>

What will be rendered inside the <div>?

Svelte

<div class="card">
  <slot>Default content</slot>
</div>

A The text 'Hello, world!' inside the div

B The text 'Default content' inside the div

C An empty div with no text

D A runtime error because slot is missing

💡 Hint

Think about what happens when you put content between component tags and the component has a default slot.

The default slot displays any content passed between the component tags. Here, 'Hello, world!' replaces the default slot content.

📝 Syntax

intermediate

Which option correctly defines a default slot in Svelte?

Choose the correct syntax to create a default slot with fallback content 'Loading...'.

A <slot>Loading...</slot>

B <slot name="default">Loading...</slot>

C <slot fallback="Loading..."></slot>

D <slot default>Loading...</slot>

💡 Hint

Default slots do not need a name attribute.

The default slot is created simply with <slot> and fallback content inside it. Named slots require a name attribute, but default slots do not.

❓ state_output

advanced

What will be the output when slot content changes dynamically?

Given this parent component:

<script>
  import Card from './Card.svelte';
  let message = 'Hello';
  setTimeout(() => message = 'Goodbye', 1000);
</script>

<Card>{message}</Card>

And Card.svelte:

<div class="card">
  <slot>Default</slot>
</div>

What will the user see after 2 seconds?

A The text 'Default' inside the div

B The text 'Hello' inside the div

C An empty div with no text

D The text 'Goodbye' inside the div

💡 Hint

Slots update reactively when the parent content changes.

The slot content is reactive. When message changes to 'Goodbye', the slot updates to show the new text.

🔧 Debug

advanced

Why does this slot fallback content never show?

Look at this component usage:

<Wrapper></Wrapper>

And the component code:

<div>
  <slot>Fallback content</slot>
</div>

Why does 'Fallback content' never appear?

A Because fallback content is ignored in Svelte slots

B Because the parent component always passes empty content, so slot is considered filled

C Because fallback content only shows if no content is passed between tags, but empty content counts as content

D Because the slot tag is missing a name attribute

💡 Hint

Think about what counts as 'no content' for a slot fallback.

Even empty whitespace or empty tags count as slot content, so fallback only shows if nothing is passed at all.

🧠 Conceptual

expert

How does Svelte handle default slot content when nested components are involved?

Consider these components:

// Parent.svelte
<Child>Parent content</Child>

// Child.svelte
<slot>Child default</slot>

// Grandchild.svelte
<slot>Grandchild default</slot>

If Child.svelte uses <Grandchild></Grandchild> inside its slot, what will be rendered?

A The text 'Parent content' replaces Child's slot, and Grandchild's default slot shows 'Grandchild default'

B The text 'Parent content' replaces Child's slot, and Grandchild's slot is empty so fallback 'Grandchild default' shows

C The text 'Parent content' replaces Child's slot, and Grandchild's slot is replaced by 'Parent content' again

D Only 'Child default' is shown because Parent content is ignored

💡 Hint

Remember how slots pass content down and fallback content works at each level.

Parent content fills Child's slot. If Child uses Grandchild without passing content, Grandchild's slot is empty, so its fallback shows.