Component file (.svelte) anatomy

Introduction

A Svelte component file (.svelte) holds all parts needed to create a UI piece in one place. It makes building web apps simple and organized.

When you want to build a reusable button with its own style and behavior.

When creating a small part of a webpage like a header or footer.

When you want to keep HTML, CSS, and JavaScript together for easy editing.

When building interactive UI parts that update automatically.

When you want to share UI pieces across different pages or projects.

Syntax

Svelte

<script>
  // JavaScript code here
</script>

<style>
  /* CSS styles here */
</style>

<!-- HTML markup here -->

The <script> tag holds JavaScript for logic and data.

The <style> tag holds CSS scoped to this component only.

Examples

A simple button that counts clicks using JavaScript inside <script>.

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

CSS styles inside <style> apply only to this component's button.

Svelte

<style>
  button {
    background-color: lightblue;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
  }
</style>

Using export let to accept a value from outside the component.

Svelte

<script>
  export let name = 'Friend';
</script>

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

Sample Program

This component greets a user by name and has a button that counts clicks. It shows how HTML, CSS, and JavaScript live together in one .svelte file.

Svelte

<script>
  export let name = 'Visitor';
  let count = 0;
</script>

<style>
  h1 {
    color: teal;
    font-family: Arial, sans-serif;
  }
  button {
    background-color: coral;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    cursor: pointer;
  }
</style>

<h1>Welcome, {name}!</h1>
<button on:click={() => count++} aria-label="Click to increase count">
  Clicked {count} times
</button>

Important Notes

Each .svelte file is a self-contained component with its own logic, style, and markup.

Styles inside <style> are scoped, so they won't affect other parts of your app.

Use export let to pass data into components from outside.

Summary

A .svelte file combines JavaScript, CSS, and HTML in one place.

This makes components easy to build, read, and reuse.

Scoped styles keep your design neat and avoid conflicts.

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