svelte:fragment for grouping - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this svelte:fragment render?

Consider this Svelte code snippet using svelte:fragment. What will be rendered in the browser?

Svelte

<script>
  let show = true;
</script>

<svelte:fragment>
  {#if show}
    <p>Hello</p>
  {/if}
  <p>World</p>
</svelte:fragment>

A <p>Hello</p><p>World</p>

B <p>Hello</p>

C <p>World</p>

D Nothing renders

💡 Hint

Remember that svelte:fragment groups elements without adding extra HTML tags.

The svelte:fragment groups the {#if} block and the <p>World</p> paragraph together without adding extra wrappers. Since show is true, both paragraphs render.

📝 Syntax

intermediate

Which option correctly uses svelte:fragment to group elements?

Select the option that uses svelte:fragment with correct syntax to group two paragraphs.

A

<svelte:fragment>
  <p>One</p>
  <p>Two</p>
</svelte:fragment>

B

<svelte:fragment>
  <p>One</p>
  <p>Two</p>

C

<svelte:fragment>
  <p>One</p>
  <p>Two</p>
</fragment>

D

<fragment>
  <p>One</p>
  <p>Two</p>
</fragment>

💡 Hint

Check the opening and closing tags carefully.

Option A correctly opens and closes the svelte:fragment tag. Other options have missing or incorrect closing tags.

❓ state_output

advanced

What is the output when toggling state inside svelte:fragment?

Given this Svelte component, what text is shown after clicking the button twice?

Svelte

<script>
  let count = 0;
  function toggle() {
    count = (count + 1) % 3;
  }
</script>

<svelte:fragment>
  {#if count === 0}
    <p>Zero</p>
  {:else if count === 1}
    <p>One</p>
  {:else}
    <p>Two</p>
  {/if}
  <button on:click={toggle}>Toggle</button>
</svelte:fragment>

A After two clicks, no text shows

B After two clicks, the text shows: Two

C After two clicks, the text shows: Zero

D After two clicks, the text shows: One

💡 Hint

Count cycles through 0, 1, 2 with each click.

Initial count is 0 showing 'Zero'. First click sets count to 1 showing 'One'. Second click sets count to 2 showing 'Two'.

🔧 Debug

advanced

Why does this svelte:fragment code cause a runtime error?

Identify the cause of the runtime error in this Svelte snippet:

Svelte

<script>
  let items = null;
</script>

<svelte:fragment>
  {#each items as item}
    <p>{item}</p>
  {/each}
</svelte:fragment>

A Because <code>items</code> is not declared as an array

B Because <code>svelte:fragment</code> cannot contain <code>{#each}</code> blocks

C Because <code>items</code> is null, <code>{#each}</code> cannot iterate and throws an error

D Because <code>{item}</code> is not a valid variable name

💡 Hint

Check the value of items before iteration.

The {#each} block expects an iterable. Since items is null, it causes a runtime error. svelte:fragment can contain {#each} blocks, so B is incorrect.

🧠 Conceptual

expert

What is the main benefit of using svelte:fragment in a component?

Choose the best explanation for why svelte:fragment is useful in Svelte components.

A It replaces the need for <code>{#if}</code> blocks in conditional rendering

B It automatically adds a <code>div</code> wrapper around grouped elements for styling

C It enables two-way binding on multiple elements simultaneously

D It allows grouping multiple elements without adding extra HTML tags to the DOM

💡 Hint

Think about how HTML structure is affected by svelte:fragment.

svelte:fragment groups elements logically in Svelte without creating extra HTML nodes, keeping the DOM clean. It does not add wrappers or replace conditional blocks.