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.

Practice

1. What is the purpose of the default slot in a Svelte component?

easy

A. To display content passed from the parent component if no named slot is used

B. To define a CSS style inside the component

C. To handle component state changes

D. To import external JavaScript files

Solution

1. Step 1: Understand what a slot does

   A slot allows a parent component to pass content into a child component.

2. Step 2: Identify the role of the default slot

   The default slot is the unnamed slot that receives content if no specific slot name is given.

3. Final Answer:

   To display content passed from the parent component if no named slot is used -> Option A

4. Quick Check:

   Default slot = main content placeholder [OK]

Hint: Default slot shows passed content if no slot name given [OK]

Common Mistakes:

• Confusing slots with CSS or state
• Thinking default slot is for styles
• Assuming default slot imports scripts

2. Which of the following is the correct syntax to define a default slot in a Svelte component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall slot syntax in Svelte

   The default slot is defined simply with <slot></slot> without a name attribute.

2. Step 2: Check the options for correct syntax

   Only uses <slot></slot> without a name, which is correct for the default slot.

3. Final Answer:

   <slot></slot> -> Option A

4. Quick Check:

   Default slot = <slot></slot> [OK]

Hint: Default slot uses <slot> without name attribute [OK]

Common Mistakes:

• Adding name="default" attribute incorrectly
• Using custom tags like
• Confusing named slots with default slot syntax

3. Given the following Svelte component code, what will be rendered?

<!-- Child.svelte -->
<slot>No content provided</slot>

<!-- Parent.svelte -->
<Child>
  <p>Hello from parent</p>
</Child>

medium

A. No content provided

B. Hello from parent

C. An empty space

D. Error: slot not found

Solution

1. Step 1: Understand default slot behavior

   The <slot> tag shows content passed from the parent if any is provided.

2. Step 2: Check if parent passes content

   The parent passes <p>Hello from parent</p> inside <Child>, so this content replaces the default slot fallback.

3. Final Answer:

   Hello from parent -> Option B

4. Quick Check:

   Parent content replaces default slot fallback [OK]

Hint: Parent content overrides default slot fallback text [OK]

Common Mistakes:

• Assuming fallback text always shows
• Thinking slot content is ignored
• Expecting an error when slot is used

4. Identify the error in this Svelte component using a default slot:

<slot name>Fallback</slot>

medium

A. The fallback content must be outside the slot tag

B. Slots cannot have fallback content

C. The slot tag should not have a name attribute without a value

D. The slot tag must be self-closing

Solution

1. Step 1: Analyze the slot tag attributes

   The slot tag has a name attribute but no value, which is invalid syntax.

2. Step 2: Recall correct slot syntax

   Named slots require a name with a string value, or omit the name attribute for default slot.

3. Final Answer:

   The slot tag should not have a name attribute without a value -> Option C

4. Quick Check:

   Empty name attribute on slot is invalid [OK]

Hint: Name attribute must have a value or be omitted [OK]

Common Mistakes:

• Leaving name attribute empty
• Thinking fallback content is invalid
• Using self-closing slot tags incorrectly

5. You want a Svelte component to show a message passed from the parent, but if no message is given, it should show "Welcome!" by default. Which code correctly uses the default slot to achieve this?

hard

A.

B. Welcome!

C. {message || 'Welcome!'}

D. Welcome!

Solution

1. Step 1: Understand default slot fallback usage

   The default slot shows fallback content if no content is passed from the parent.

2. Step 2: Identify correct fallback syntax

   Using <slot>Welcome!</slot> sets "Welcome!" as fallback text correctly.

3. Step 3: Check other options for errors

   <slot name="default">Welcome!</slot> incorrectly uses name="default" which is unnecessary; C uses invalid expression inside slot; D uses non-existent fallback attribute.

4. Final Answer:

   <slot>Welcome!</slot> -> Option D

5. Quick Check:

   Default slot fallback = content inside <slot> [OK]

Hint: Put fallback text inside <slot> tags for default content [OK]

Common Mistakes:

• Adding name="default" attribute unnecessarily
• Trying to use JavaScript expressions inside slot tags
• Using invalid fallback attributes