svelte:fragment for grouping - Mini Project: Build & Apply

Using <svelte:fragment> to Group Elements in Svelte

📖 Scenario: You are building a simple Svelte component that shows a greeting message and a list of favorite fruits. You want to group some elements together without adding extra HTML tags to the page.

🎯 Goal: Build a Svelte component that uses &lt;svelte:fragment&gt; to group multiple elements logically without adding extra wrappers in the HTML output.

📋 What You'll Learn

Create a variable called name with the value "Alex".

Create a variable called fruits with the array ["Apple", "Banana", "Cherry"].

Use <svelte:fragment> to group a greeting <h1> and a paragraph <p>.

Use <svelte:fragment> to group a heading <h2> and an unordered list <ul> of fruits.

💡 Why This Matters

🌍 Real World

Grouping elements without extra wrappers helps keep HTML clean and accessible, especially when building reusable components or layouts.

💼 Career

Understanding <svelte:fragment> is useful for frontend developers working with Svelte to write clean, maintainable, and semantic UI code.

1

Create the initial data variables

Create a variable called name and set it to "Alex". Also create a variable called fruits and set it to the array ["Apple", "Banana", "Cherry"].

Svelte

# Create variables name and fruits

// Your code here

Hint

Use let to declare variables in Svelte script.

2

Group greeting elements with

Use <svelte:fragment> to group an <h1> element that says Hello, {name}! and a <p> element that says Welcome to the fruit list..

Svelte

let name = "Alex";
let fruits = ["Apple", "Banana", "Cherry"];

 to group greeting elements -->

Hint

Wrap the <h1> and <p> inside <svelte:fragment> tags.

3

Group fruit list elements with

Use another <svelte:fragment> to group an <h2> element with text Fruits: and an unordered list <ul> that shows each fruit from the fruits array inside <li> elements using {#each fruits as fruit}.

Svelte

let name = "Alex";
let fruits = ["Apple", "Banana", "Cherry"];


  Hello, {name}!
  Welcome to the fruit list.


 to group fruit heading and list -->

Hint

Use <svelte:fragment> to wrap the <h2> and <ul> with the {#each} block inside.

4

Complete the component with no extra wrappers

Ensure the component uses only the two <svelte:fragment> groups you created, with no extra HTML wrapper tags around them.

Svelte

let name = "Alex";
let fruits = ["Apple", "Banana", "Cherry"];


  Hello, {name}!
  Welcome to the fruit list.



  Fruits:
  
    {#each fruits as fruit}
      {fruit}
    {/each}
  

Hint

Make sure you did not add any extra HTML tags outside the <svelte:fragment> groups.