Slot basics (default slot) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to insert default slot content inside the component.

Svelte

<div>
  [1]
</div>

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

A<slot name="default"></slot>

B<slot></slot>

C<content></content>

D<slot-default></slot-default>

Attempts:

3 left

💡 Hint

Common Mistakes

Using or which are not valid in Svelte.

Adding a name attribute for the default slot which is unnecessary.

The tag is used in Svelte to insert default slot content inside a component.

2fill in blank

medium

Complete the parent component code to pass content into the default slot.

Svelte

<ChildComponent>
  [1]
</ChildComponent>

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

A<div slot="default">This is slot content</div>

B<slot>This is slot content</slot>

C<template>This is slot content</template>

D<p>This is slot content</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Using slot attributes on elements inside the parent which is only for named slots.

Wrapping content in tags inside the parent which is incorrect.

To pass content into the default slot, simply place the content inside the component tags without any slot attribute.

3fill in blank

hard

Fix the error in the child component to correctly render default slot content.

Svelte

<div>
  [1]
</div>

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

A{#slot}

B{slot}

C<slot></slot>

D<slot name="default"></slot>

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces around slot which is invalid.

Using named slot syntax for default slot.

The correct syntax to render default slot content is using in Svelte.

4fill in blank

hard

Fill both blanks to create a child component that wraps default slot content in a section with a class.

Svelte

<section class=[1]>
  [2]
</section>

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

A"wrapper"

B<slot></slot>

Cslot

D"content"

Attempts:

3 left

💡 Hint

Common Mistakes

Using class without quotes causing syntax errors.

Not including the tag to render content.

The section should have a class name as a string and include the tag to render default slot content.

5fill in blank

hard

Fill all three blanks to create a parent component passing a paragraph into a child component's default slot with a wrapper class.

Svelte

<ChildComponent class=[1]>
  [2]
</ChildComponent>

<script>
  import ChildComponent from './ChildComponent.svelte';
  let wrapperClass = [3];
</script>

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

A"main-wrapper"

B<p>Welcome to the slot!</p>

DwrapperClass

Attempts:

3 left

💡 Hint

Common Mistakes

Passing class as a raw string without quotes.

Not importing the child component correctly.

Using slot attributes in the parent for default slot content.

The class attribute is set to a string variable, the paragraph is passed as default slot content, and the variable is defined as a string.