Named slots in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider the following Svelte component usage:

<Parent>
  <div slot="header">Header Content</div>
  <div slot="footer">Footer Content</div>
</Parent>

And the Parent.svelte component:

<slot name="header"/>
<slot/>
<slot name="footer"/>

What will be the rendered output?

Svelte

<slot name="header"/>
<slot/>
<slot name="footer"/>

A <div>Header Content</div><div>Footer Content</div>

B <div></div><div>Header Content</div><div>Footer Content</div>

C <div>Header Content</div><div>Footer Content</div><div></div>

D <div>Header Content</div><div></div><div>Footer Content</div>

💡 Hint

Remember that the default slot renders content without a slot attribute.

The Parent component has three slots: named 'header', default (unnamed), and named 'footer'. The usage provides content only for 'header' and 'footer' slots. The default slot is empty, so it renders nothing.

📝 Syntax

intermediate

Which option correctly defines a named slot in Svelte?

Choose the correct syntax to define a named slot called "sidebar" inside a Svelte component.

A &lt;slot slot="sidebar"/&gt;

B &lt;slot name={sidebar}&gt;&lt;/slot&gt;

C &lt;slot name="sidebar"/&gt;

D &lt;slot slotName="sidebar"/&gt;

💡 Hint

Named slots use the name attribute exactly.

The correct way to define a named slot is using <slot name="sidebar"/>. Other options use incorrect attribute names or syntax.

❓ state_output

advanced

What is the output when using fallback content in named slots?

Given this Parent.svelte component:

<slot name="title">Default Title</slot>
<slot name="content">Default Content</slot>

And this usage:

<Parent>
  <div slot="content">Custom Content</div>
</Parent>

What will be rendered?

Svelte

<slot name="title">Default Title</slot>
<slot name="content">Default Content</slot>

A Default TitleCustom Content

B Default TitleDefault Content

C Custom ContentDefault Title

D Custom ContentCustom Content

💡 Hint

Fallback content shows only if no slot content is provided for that slot.

The 'title' slot has no content provided, so it renders its fallback 'Default Title'. The 'content' slot has custom content, so it renders 'Custom Content'.

🔧 Debug

advanced

Why does this named slot content not render?

Consider this Parent.svelte component:

<slot name="main"/>

And this usage:

<Parent>
  <div slot="content">Hello</div>
</Parent>

Why does "Hello" not appear in the output?

Svelte

<slot name="main"/>

A The slot name in usage ('content') does not match the slot name in Parent ('main').

B The slot attribute must be on the Parent component, not the child elements.

C Named slots require a fallback content to render anything.

D Svelte does not support named slots with div elements.

💡 Hint

Check if the slot names match exactly.

The slot attribute in the usage is 'content', but the Parent component expects 'main'. Because they don't match, the content is not rendered in the named slot.

🧠 Conceptual

expert

How many named slots are rendered in this scenario?

Given a Svelte component with these slots:

<slot name="header"/>
<slot/>
<slot name="footer"/>

And usage:

<Component>
  <div slot="header">H</div>
  <div slot="footer">F</div>
  <div>D</div>
  <div slot="sidebar">S</div>
</Component>

How many slots will render content?

Svelte

<slot name="header"/>
<slot/>
<slot name="footer"/>

A 2

B 3

C 4

D 1

💡 Hint

Only content matching slot names or default slot renders.

The 'header' slot gets 'H', the default slot gets 'D', and the 'footer' slot gets 'F'. The 'sidebar' slot is unused because no matching slot exists in the component. So 3 slots render content.