Named slots in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a named slot called "header" in a Svelte component.

Svelte

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

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

Aheader

Bfooter

Cmain

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add the name attribute to the slot tag.

Using an incorrect slot name that doesn't match the parent.

The name attribute defines the named slot. Here, it should be "header" to create a named slot called "header".

2fill in blank

medium

Complete the code to fill the named slot "footer" in a parent Svelte component.

Svelte

<ChildComponent>
  <div slot="[1]">This is the footer content.</div>
</ChildComponent>

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

Aheader

Bfooter

Cmain

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using a slot name that does not exist in the child component.

Omitting the slot attribute, which fills the default slot instead.

To fill a named slot, the slot attribute on the child element must match the slot's name in the child component. Here, it is "footer".

3fill in blank

hard

Fix the error in the code to correctly define and use a named slot "sidebar".

Svelte

<!-- Child.svelte -->
<slot name="[1]"></slot>

<!-- Parent.svelte -->
<Child>
  <p slot="sidebar">Sidebar content</p>
</Child>

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

Aheader

Bside

Cfooter

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the slot in child and parent components.

Forgetting to add the slot attribute in the parent.

The named slot in the child component must match the slot attribute in the parent. Here, the child defines "sidebar" but the parent uses "sidebar". Changing the child's slot name to "sidebar" fixes the mismatch.

4fill in blank

hard

Fill both blanks to create a named slot "title" and fill it with a heading in the parent component.

Svelte

<!-- Child.svelte -->
<slot name="[1]">Default Title</slot>

<!-- Parent.svelte -->
<Child>
  <h1 slot="[2]">Welcome!</h1>
</Child>

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

Atitle

Bheader

Cfooter

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the slot in child and parent.

Forgetting to add the slot attribute in the parent element.

Both the named slot in the child and the slot attribute in the parent must be "title" to connect correctly.

5fill in blank

hard

Fill all three blanks to define two named slots "nav" and "content" in the child and fill them in the parent component.

Svelte

<!-- Child.svelte -->
<nav><slot name="[1]">Default Nav</slot></nav>
<main><slot name="[2]">Default Content</slot></main>

<!-- Parent.svelte -->
<Child>
  <ul slot="[3]">
    <li>Home</li>
    <li>About</li>
  </ul>
  <section slot="content">
    <p>Main content here.</p>
  </section>
</Child>

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

Anav

Bcontent

Csidebar

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect slot names in the parent.

Forgetting to add slot attributes on elements filling named slots.

The child defines slots named "nav" and "content". The parent fills the "nav" slot with the

element and the "content" slot with the
. The

must have slot="nav" to match the child's slot name.