Component file (.svelte) anatomy - Mini Project: Build & Apply

Component file (.svelte) anatomy

📖 Scenario: You are building a simple Svelte component to display a greeting message on a webpage. This will help you understand the basic structure of a Svelte component file.

🎯 Goal: Create a Svelte component file with the correct sections: a script block for JavaScript, a style block for CSS, and markup for HTML content. The component will show a greeting message styled with a color.

📋 What You'll Learn

Create a <script> block with a variable greeting set to 'Hello, Svelte!'

Add a <style> block that sets the text color of a class .greeting to blue

Write HTML markup that uses a <h1> element with class greeting to display the greeting variable

Ensure the component file has all three sections properly placed

💡 Why This Matters

🌍 Real World

Svelte components are the building blocks of modern web apps. Understanding their structure helps you create interactive and styled UI parts.

💼 Career

Knowing how to organize Svelte files is essential for frontend developer roles using Svelte. It improves code readability and maintainability.

1

Create the script block with greeting variable

Create a <script> block and inside it declare a variable called greeting with the exact value 'Hello, Svelte!'.

Svelte

  // Declare greeting variable here

Hint

Use let greeting = 'Hello, Svelte!'; inside the <script> tags.

2

Add a style block for greeting color

Add a <style> block below the script block. Inside it, create a CSS rule for the class .greeting that sets color to blue.

Svelte

  let greeting = 'Hello, Svelte!';



  /* Add .greeting color style here */

Hint

Write CSS inside <style> tags. Use .greeting { color: blue; }.

3

Add HTML markup to display greeting

Below the style block, add an <h1> element with class greeting. Inside it, use curly braces to insert the greeting variable so it displays the text.

Svelte

  let greeting = 'Hello, Svelte!';



  .greeting {
    color: blue;
  }


 with class greeting and insert greeting variable -->

Hint

Use <h1 class="greeting">{greeting}</h1> to show the message.

4

Complete the Svelte component structure

Ensure the component file has the <script> block first, then the <style> block, and finally the HTML markup with the <h1> element displaying the greeting. The order and structure must be correct.

Svelte

  let greeting = 'Hello, Svelte!';



  .greeting {
    color: blue;
  }


{greeting}

Hint

The script block must come first, then style, then markup. Check your file order.

Practice

1. What are the three main parts you can find inside a .svelte component file?

easy

A. JavaScript, HTML, and SQL

B. JavaScript, XML, and CSS

C. HTML, CSS, and JSON

D. JavaScript, HTML, and CSS

Solution

1. Step 1: Identify the parts of a .svelte file

   A .svelte file combines JavaScript for logic, HTML for structure, and CSS for styling.

2. Step 2: Confirm the correct combination

   Only JavaScript, HTML, and CSS lists JavaScript, HTML, and CSS, which are the correct parts.

3. Final Answer:

   JavaScript, HTML, and CSS -> Option D

4. Quick Check:

   Component parts = JavaScript, HTML, CSS [OK]

Hint: Remember: logic, structure, style = JS, HTML, CSS [OK]

Common Mistakes:

• Confusing XML with HTML
• Thinking JSON is part of .svelte file
• Mixing SQL with component code

2. Which of the following is the correct way to include scoped CSS inside a .svelte file?

easy

A.

B. h1 { color: red; }

C.

D.

Solution

1. Step 1: Understand how styles are added in Svelte

   Svelte uses the <style> tag inside the component file for CSS, which is automatically scoped.

2. Step 2: Check the options for correct syntax

   <style> h1 { color: red; } </style> uses <style> correctly. <style scoped> h1 { color: red; } </style> adds 'scoped' attribute which is not needed in Svelte.

3. Final Answer:

   <style> h1 { color: red; } </style> -> Option A

4. Quick Check:

   Use <style> for scoped CSS in Svelte [OK]

Hint: Use <style> tag only; Svelte scopes CSS automatically [OK]

Common Mistakes:

• Adding 'scoped' attribute to <style>
• Using <css> or <script> tags for CSS
• Placing CSS outside the component file

3. Given this .svelte component code, what will be rendered?

<script>
  let name = 'Anna';
</script>

<h1>Hello {name}!
</h1>

<style>
  h1 { color: blue; }
</style>

medium

A. Hello Anna!

B. Hello {name}!

C. Hello Anna!

D. Error: name is not defined

Solution

1. Step 1: Understand variable interpolation in Svelte

   The variable 'name' is set to 'Anna' and used inside curly braces to show its value.

2. Step 2: Check the style applied

   The <style> tag sets h1 color to blue, so the text will appear blue.

3. Final Answer:

   <h1 style="color: blue;">Hello Anna!</h1> -> Option C

4. Quick Check:

   Variable interpolation and scoped CSS = blue text 'Hello Anna!' [OK]

Hint: Curly braces show variables; style applies to elements [OK]

Common Mistakes:

• Thinking {name} prints literally
• Ignoring CSS color applied
• Assuming variable is undefined

4. What is wrong with this .svelte component code?

<script>
  let count = 0
</script>

<button on:click="count++">Click me</button>

<p>Count: {count}</p>

medium

A. The <p> tag cannot use curly braces

B. The on:click handler should not use quotes

C. The variable count must be declared with const

D. Missing semicolon after let count = 0

Solution

1. Step 1: Check event handler syntax in Svelte

   In Svelte, event handlers like on:click should be assigned JavaScript expressions without quotes.

2. Step 2: Identify the error in the code

   The code uses on:click="count++" with quotes, which causes a syntax error.

3. Final Answer:

   The on:click handler should not use quotes -> Option B

4. Quick Check:

   Event handlers = no quotes around JS code [OK]

Hint: Use on:event={handler} without quotes in Svelte [OK]

Common Mistakes:

• Adding quotes around event handlers
• Using const instead of let for reactive variables
• Thinking semicolons are mandatory in Svelte scripts

5. You want to create a .svelte component that shows a list of items with each item styled differently. Which approach correctly uses the component file anatomy to achieve this?

hard

A.

{#each items as item}{item}{/each}

B.

{items.map(item => `${item}`)}

C.

{items.forEach(item => {item})}

D.

{#each items as item}{item}{/each}

Solution

1. Step 1: Understand Svelte's each block for lists

   Svelte uses {#each} blocks to loop over arrays and render elements for each item.

2. Step 2: Check styling and rendering correctness

   {#each items as item}
   • {item}
   {/each}
   uses {#each} correctly and applies scoped CSS to li elements.
   {#each items as item}
   • {item}
   {/each}
   overrides color inline, which is inconsistent with the style block.

3. Final Answer:

   Use {#each} with scoped CSS for list items -> Option A

4. Quick Check:

   List rendering + scoped CSS =
   {#each items as item}
   • {item}
   {/each}
   [OK]

Hint: Use {#each} for lists and style with <style> tag [OK]

Common Mistakes:

• Using map or forEach inside markup incorrectly
• Mixing inline styles with scoped CSS unnecessarily
• Styling wrong elements like ul instead of li