Script, markup, and style sections in Svelte

Introduction

Svelte uses three parts to build a component: script for logic, markup for structure, and style for look. This keeps things clear and organized.

When you want to add JavaScript code to control your component's behavior.

When you need to write the HTML structure that users will see.

When you want to style your component with CSS that only applies there.

When you want to keep your component's code clean and easy to understand.

When you want styles that don't affect other parts of your app.

Syntax

Svelte

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

<!-- HTML markup here -->

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

The <script> section holds JavaScript logic like variables and functions.

The markup is plain HTML but can use Svelte features like curly braces for variables.

Examples

This example shows all three sections: script defines a variable, markup uses it, and style changes the button look.

Svelte

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

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

<style>
  button {
    font-size: 1.2rem;
  }
</style>

Here, script sets a name, markup shows it inside a heading, and style colors the heading.

Svelte

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

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

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

Sample Program

This Svelte component shows how script, markup, and style work together. The script holds a message and a function to change it. The markup displays the message and a button that calls the function when clicked. The style makes the text and button look nice and accessible.

Svelte

<script>
  let message = 'Welcome to Svelte!';
  function changeMessage() {
    message = 'You clicked the button!';
  }
</script>

<main>
  <h2>{message}</h2>
  <button on:click={changeMessage} aria-label="Change message">
    Click me
  </button>
</main>

<style>
  main {
    font-family: system-ui, sans-serif;
    text-align: center;
    margin-top: 2rem;
  }
  h2 {
    color: #2c3e50;
  }
  button {
    background-color: #42b983;
    border: none;
    padding: 0.5rem 1rem;
    color: white;
    font-size: 1rem;
    border-radius: 0.3rem;
    cursor: pointer;
  }
  button:hover,
  button:focus {
    background-color: #369870;
    outline: none;
  }
</style>

Important Notes

The <style> section styles only this component by default, avoiding conflicts.

Use on:click to handle user clicks in markup.

Always add aria-label or other accessibility attributes to interactive elements.

Summary

Svelte components have three parts: script for logic, markup for structure, and style for appearance.

This separation helps keep code clean and easy to manage.

Styles inside a component apply only there, making your app easier to maintain.

Practice

1. Which section in a Svelte component is used to write JavaScript logic?

easy

A. <logic> section

B. <script> section

C. <markup> section

D. <style> section

Solution

1. Step 1: Identify the purpose of each section

   The <script> section is for JavaScript logic, <style> is for CSS, and markup is the HTML structure.

2. Step 2: Match the section to JavaScript logic

   Since logic means JavaScript code, it belongs in the <script> section.

3. Final Answer:

   <script> section -> Option B

4. Quick Check:

   Logic = <script> section [OK]

Hint: Logic always goes inside <script> tags in Svelte [OK]

Common Mistakes:

• Confusing <style> with <script>
• Thinking markup is for logic
• Assuming a <logic> tag exists

2. Which of the following is the correct way to add scoped styles inside a Svelte component?

easy

A. <style global> h1 { color: red; } </style>

B. <style scoped> h1 { color: red; } </style>

C. <style> h1 { color: red; } </style>

D. <css> h1 { color: red; } </css>

Solution

1. Step 1: Understand Svelte's style scoping

   Svelte automatically scopes styles inside the <style> tag to the component without needing extra attributes.

2. Step 2: Identify correct syntax

   The correct syntax is just <style> with CSS inside. Adding scoped or global changes behavior or is invalid.

3. Final Answer:

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

4. Quick Check:

   Default <style> is scoped in Svelte [OK]

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

Common Mistakes:

• Adding 'scoped' attribute which is unnecessary
• Using <css> tag instead of <style>
• Confusing global styles with scoped styles

3. What will be rendered by this Svelte component?

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

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

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

medium

A. Hello Anna! with default text color

B. Hello {name}! with default text color

C. Error because style is inside component

D. Hello Anna! with blue text

Solution

1. Step 1: Understand variable interpolation in markup

   The {name} inside markup inserts the value of the variable name, which is 'Anna'.

2. Step 2: Recognize scoped styles effect

   The <style> section styles the h1 with blue color scoped to this component.

3. Final Answer:

   <h1> Hello Anna! </h1> with blue text -> Option D

4. Quick Check:

   Variable interpolation + scoped style = blue 'Hello Anna!' [OK]

Hint: Variables in {} show their value; styles apply scoped [OK]

Common Mistakes:

• Thinking {name} prints literally
• Assuming styles don't apply inside component
• Confusing style scoping with errors

4. Identify the error in this Svelte component:

<script>
  let count = 0
</script>

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

<style>
  button { font-size: 1.2rem; }
</style>

medium

A. Incorrect event handler syntax with quotes

B. Missing semicolon after let count = 0

C. Style section must be before script

D. Button tag is not closed properly

Solution

1. Step 1: Check event handler syntax in markup

   In Svelte, event handlers use on:event={handler} without quotes around the handler expression.

2. Step 2: Identify the incorrect usage

   The code uses on:click="count++" with quotes, which is invalid syntax in Svelte.

3. Final Answer:

   Incorrect event handler syntax with quotes -> Option A

4. Quick Check:

   Event handlers need curly braces, no quotes [OK]

Hint: Use on:click={count++}, not quotes [OK]

Common Mistakes:

• Adding quotes around event handler
• Thinking semicolon is mandatory in script
• Believing style must come before script

5. You want to create a Svelte component that shows a message in red only if a variable error is true. Which combination of script, markup, and style is correct?

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

<!-- markup here -->

<style>
  .error { color: red; }
</style>

hard

A. {#if error}<p class="error">Error occurred</p>{/if} shows red text only if error is true

B. <p>{error ? 'Error occurred' : ''}</p> but no red color applied

C. <p class="error">Error occurred</p> always shows red text

D. {#if error}<p style="color: red;">Error occurred</p>{/if} but style section is ignored

Solution

1. Step 1: Use conditional markup to show message only if error is true

   The {#if error} ... {/if} block conditionally renders content based on the variable.

2. Step 2: Apply CSS class for red color

   Using class="error" applies the scoped style .error { color: red; } correctly.

3. Final Answer:

   {#if error}<p class="error">Error occurred</p>{/if} -> Option A

4. Quick Check:

   Conditional + class with style = correct red message [OK]

Hint: Use {#if} for condition and class for styling [OK]

Common Mistakes:

• Showing message always without condition
• Not applying CSS class for color
• Using inline style ignoring style section