Component composition in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a child component in Svelte.

Svelte

<script>
  import [1] from './Child.svelte';
</script>

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

AChild

BchildComponent

CComponentChild

Dchild

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or different names that don't match the component file.

Forgetting to import the component before using it.

In Svelte, you import components by their exact exported name. Here, the child component is named Child.

2fill in blank

medium

Complete the code to use the imported child component inside the parent component's markup.

Svelte

<script>
  import Child from './Child.svelte';
</script>

<main>
  <[1] />
</main>

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

AChild

Bchild

CchildComponent

DcomponentChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase tags which Svelte treats as HTML elements.

Mismatching the component name in the markup.

In Svelte, component tags use the imported component's exact name with PascalCase.

3fill in blank

hard

Fix the error in passing a prop named 'title' to the child component.

Svelte

<script>
  import Child from './Child.svelte';
</script>

<Child [1]="Welcome" />

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

AtitleProp

BTitle

Ctitle

DpropTitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing for prop names.

Passing props with names not declared in the child component.

Props in Svelte are passed using the exact prop name defined in the child component, here title.

4fill in blank

hard

Fill both blanks to create a slot in the child component and use it in the parent component.

Svelte

<!-- Child.svelte -->
<div>
  [1]
</div>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child>
  [2]
</Child>

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

A<slot />

B<slot></slot>

C<content />

D<slot-content />

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect slot tags like which don't exist in Svelte.

Not placing content inside the child component tags in the parent.

The child component uses <slot /> to mark where passed content goes. The parent places content inside the child tags.

5fill in blank

hard

Fill all three blanks to pass a prop and use a named slot in the child component.

Svelte

<!-- Child.svelte -->
<script>
  export let [1];
</script>
<h2>{ [2] }</h2>
<div>
  <slot name="footer" />
</div>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child [3]="Hello">
  <p slot="footer">This is the footer content.</p>
</Child>

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

Atitle

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching prop names between export and usage.

Not using the correct slot name in the parent content.

The prop title is declared and used in the child. The parent passes title="Hello". The named slot footer is used for extra content.