svelte:fragment for grouping - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use to group elements without extra HTML tags.

Svelte

<svelte:[1]>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</svelte:[1]>

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

Afragment

Bslot

Celement

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:slot instead of svelte:fragment.

Trying to use a normal HTML tag to group elements.

The <svelte:fragment> tag groups multiple elements without adding extra HTML tags to the DOM.

2fill in blank

medium

Complete the code to pass a named slot using .

Svelte

<ChildComponent>
  <svelte:[1] slot="header">
    <h1>Title</h1>
  </svelte:[1]>
</ChildComponent>

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

Aslot

Bcomponent

Cfragment

Delement

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:slot instead of svelte:fragment.

Not adding the slot attribute.

Use <svelte:fragment> with a slot attribute to pass grouped content to a named slot.

3fill in blank

hard

Fix the error by completing the code to group multiple elements inside a slot.

Svelte

<ParentComponent>
  <svelte:[1] slot="footer">
    <button>Cancel</button>
    <button>Save</button>
  </svelte:[1]>
</ParentComponent>

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

Aslot

Belement

Ccomponent

Dfragment

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:slot instead of svelte:fragment.

Wrapping buttons in a div instead of using svelte:fragment.

Use <svelte:fragment> to group multiple elements inside a slot without extra wrapper tags.

4fill in blank

hard

Fill both blanks to correctly use with a named slot and a class attribute.

Svelte

<MyComponent>
  <svelte:[1] slot="sidebar" class=[2]>
    <nav>Menu</nav>
  </svelte:[1]>
</MyComponent>

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

Afragment

Bslot

C"sidebar-class"

D"main-class"

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:slot instead of svelte:fragment.

Not quoting the class attribute value.

Use <svelte:fragment> to group content for the sidebar slot and add a class attribute with the correct string.

5fill in blank

hard

Fill all three blanks to create a with a named slot, a style attribute, and a data attribute.

Svelte

<Container>
  <svelte:[1] slot=[2] style=[3]>
    <p>Content here</p>
  </svelte:[1]>
</Container>

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

Afragment

B"footer"

C"color: red;"

D"header"

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:slot instead of svelte:fragment.

Forgetting quotes around slot or style attribute values.

Use <svelte:fragment> with the footer slot and a style attribute to style the grouped content.