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.

Practice

1. What is the main purpose of named slots in Svelte components?

easy

A. To allow placing content into specific parts of a component

B. To define component styles globally

C. To handle component state changes

D. To import external JavaScript files

Solution

1. Step 1: Understand what slots do

   Slots let you insert content inside a component from outside.

2. Step 2: Identify the role of named slots

   Named slots let you put content into specific places inside the component, not just one default spot.

3. Final Answer:

   To allow placing content into specific parts of a component -> Option A

4. Quick Check:

   Named slots = specific content placement [OK]

Hint: Named slots = content in specific component areas [OK]

Common Mistakes:

• Confusing slots with styling or state
• Thinking slots import files
• Assuming slots handle events

2. Which of the following is the correct syntax to define a named slot called header inside a Svelte component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall slot syntax in Svelte

   Svelte uses the <slot> tag with a name attribute to define named slots.

2. Step 2: Match correct attribute

   The attribute to name a slot is name, not id or custom tags.

3. Final Answer:

   <slot name="header"></slot> -> Option D

4. Quick Check:

   Named slot syntax = <slot name="..."> [OK]

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using id instead of name attribute
• Using custom tags instead of <slot>
• Omitting the name attribute

3. Given this Svelte component usage:

<MyComponent>
  <div slot="title">Welcome</div>
  <div slot="footer">Goodbye</div>
</MyComponent>

And inside MyComponent.svelte you have:

<slot name="title">Default Title</slot>
<slot name="footer">Default Footer</slot>

What will be rendered in the browser?

medium

A. Default Title and Default Footer ignoring the passed content

B. Only Welcome is shown, Goodbye is ignored

C. Welcome and Goodbye in their respective slot positions

D. An error occurs because slots are not used correctly

Solution

1. Step 1: Understand slot filling

   Content with slot="title" fills the named slot "title" in the component.

2. Step 2: Match passed content to slots

   The <div slot="title">Welcome</div> replaces the default title slot content, same for footer.

3. Final Answer:

   Welcome and Goodbye in their respective slot positions -> Option C

4. Quick Check:

   Named slots filled = passed content shown [OK]

Hint: Content with slot="name" replaces default slot content [OK]

Common Mistakes:

• Thinking default slot content always shows
• Assuming only default slot works
• Confusing slot attribute usage

4. What is wrong with this usage of named slots?

<MyComponent>
  <div slot="header">Hello</div>
  <div slot="footer">Bye</div>
  <div slot="header">Again</div>
</MyComponent>

Assuming MyComponent defines named slots header and footer.

medium

A. Slots must be direct children of the component, so this is invalid

B. Multiple elements use the same slot name 'header', causing only the last to render

C. Slot names must be unique and cannot be reused in the same component usage

D. There is no error; all content will render in the header slot

Solution

1. Step 1: Check multiple slot usage

   When multiple elements use the same slot name, only the last one is rendered in that slot.

2. Step 2: Understand slot content replacement

   The first header content is replaced by the second because slots accept one content block per name.

3. Final Answer:

   Multiple elements use the same slot name 'header', causing only the last to render -> Option B

4. Quick Check:

   Duplicate slot names = last content wins [OK]

Hint: Only one content block per named slot is rendered [OK]

Common Mistakes:

• Thinking all duplicates render together
• Believing slot names must be unique globally
• Assuming nested slots behave differently

5. You want to create a Svelte component Card with named slots for header, content, and footer. You also want to provide default content for each slot if none is passed. Which code snippet correctly implements this?

hard

A. Default Header
Default Content
Default Footer

B. Default Header
Default Content
Default Footer

C.

D. Default Header
Default Content
Default Footer

Solution

1. Step 1: Use correct named slot syntax with default content

   Named slots require name attribute and default content inside the slot tags.

2. Step 2: Verify all slots have names and defaults

   Default Header Default Content Default Footer correctly names all slots and provides default text inside each slot tag.

3. Final Answer:

   <slot name="header">Default Header</slot> <slot name="content">Default Content</slot> <slot name="footer">Default Footer</slot> -> Option A

4. Quick Check:

   Named slots with defaults = <slot name="...">default</slot> [OK]

Hint: Named slots need name attribute and default content inside [OK]

Common Mistakes:

• Omitting name attribute
• Using slot attribute without value
• Mixing default slot with named slots incorrectly