Slot fallback content in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show fallback content inside a slot when no content is passed.

Svelte

<slot>[1]</slot>

Drag options to blanks, or click blank then click option'

ANo content provided

Bslot

Cfallback

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Putting fallback content outside the <slot> tags

Using slot attributes instead of content inside the slot

The text inside the <slot> tags is the fallback content shown when no content is passed to the slot.

2fill in blank

medium

Complete the code to provide fallback content for a named slot called 'header'.

Svelte

<slot name="header">[1]</slot>

Drag options to blanks, or click blank then click option'

A<h1>Default Header</h1>

B<header>Header</header>

C<div>Header</div>

D<h2>Header</h2>

Attempts:

3 left

💡 Hint

Common Mistakes

Not matching the slot name attribute

Leaving the slot empty without fallback content

The fallback content for a named slot is placed inside the <slot name="header"> tags. Here, a header element is used as fallback.

3fill in blank

hard

Fix the error in the fallback content syntax inside the slot.

Svelte

<slot>[1]</slot>

Drag options to blanks, or click blank then click option'

AFallback content</p>

BFallback content<p>

C<p>Fallback content

D<p>Fallback content</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving tags unclosed

Placing closing tags without opening tags

The fallback content must be valid HTML. The <p> tag must be properly opened and closed inside the slot.

4fill in blank

hard

Fill both blanks to create a named slot 'footer' with fallback text 'Default footer'.

Svelte

<slot [1]="footer">[2]</slot>

Drag options to blanks, or click blank then click option'

Aname

Bfooter

CDefault footer

Dslot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'slot' instead of 'name' attribute

Putting fallback content as attribute value

The attribute 'name' defines the slot's name. The fallback text goes inside the slot tags.

5fill in blank

hard

Fill all three blanks to create a slot with fallback content that includes a paragraph and a strong tag.

Svelte

<slot>[1]<strong>[2]</strong>[3]</slot>

Drag options to blanks, or click blank then click option'

A<p>

BImportant

C</p>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Not closing the paragraph tag

Using incorrect tags like <div> instead of <p>

The fallback content uses a paragraph tag wrapping text and a strong tag for emphasis.