Scoped styles by default in Svelte - Mini Project: Build & Apply

Scoped styles by default in Svelte

📖 Scenario: You are building a simple user profile card for a website. You want to style the card so that the styles only apply to this card component and do not affect other parts of the page.

🎯 Goal: Create a Svelte component with scoped styles so that the styles apply only inside this component.

📋 What You'll Learn

Create a Svelte component with a <script> section containing a user object with name and age properties.

Add a configuration variable called highlightAge set to 30.

Use a Svelte reactive statement to create a variable isHighlighted that is true if user.age is greater than highlightAge.

Add scoped CSS styles inside a <style> tag that style the card and highlight the age if isHighlighted is true.

💡 Why This Matters

🌍 Real World

Scoped styles help keep component styles isolated so they do not affect other parts of a web page. This is useful in large web apps with many components.

💼 Career

Understanding scoped styles and reactive variables in Svelte is important for building maintainable and bug-free user interfaces in modern web development.

1

Create the user data

Create a user object inside the <script> tag with name set to "Alice" and age set to 35.

Svelte

  // Your code here



  {user.name}
  Age: {user.age}

Hint

Use const user = { name: "Alice", age: 35 } inside the <script> tag.

2

Add a highlight age configuration

Add a constant variable called highlightAge inside the <script> tag and set it to 30.

Svelte

  const user = { name: "Alice", age: 35 };
  // Your code here



  {user.name}
  Age: {user.age}

Hint

Write const highlightAge = 30; inside the <script> tag.

3

Create reactive variable for highlighting

Add a reactive statement that creates a variable isHighlighted which is true if user.age is greater than highlightAge, otherwise false. Use $: syntax inside the <script> tag.

Svelte

  const user = { name: "Alice", age: 35 };
  const highlightAge = 30;
  // Add reactive statement for isHighlighted



  {user.name}
  Age: {user.age}

Hint

Use $: isHighlighted = user.age > highlightAge; to create a reactive variable.

4

Add scoped styles with conditional class

Add a <style> tag with scoped CSS that styles the .card with a border and padding. Also add a style for .is-highlighted that changes the text color to red. Use the class directive class:is-highlighted={isHighlighted} on the age paragraph.

Svelte

  const user = { name: "Alice", age: 35 };
  const highlightAge = 30;
  $: isHighlighted = user.age > highlightAge;



  {user.name}
  Age: {user.age}



  /* Your styles here */

Hint

Write CSS inside <style> to style .card and .is-highlighted. Use the class directive on the age paragraph.

Practice

1. What does it mean that styles in Svelte are scoped by default?

easy

A. Styles inside a component only affect that component's elements.

B. Styles apply globally to all components automatically.

C. You must manually scope styles using special selectors.

D. Styles are disabled unless scoped explicitly.

Solution

1. Step 1: Understand Svelte's style behavior

   Svelte automatically scopes styles so they only apply inside the component where they are written.

2. Step 2: Compare options with this behavior

   Only Styles inside a component only affect that component's elements. correctly states that styles affect only the component's elements, not globally or requiring manual scoping.

3. Final Answer:

   Styles inside a component only affect that component's elements. -> Option A

4. Quick Check:

   Scoped styles = local effect [OK]

Hint: Remember: Svelte styles stay local unless global keyword used [OK]

Common Mistakes:

• Thinking styles apply globally by default
• Believing manual scoping is needed
• Confusing scoped with disabled styles

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

easy

A.

B. p { color: red; }

C.

D.

Solution

1. Step 1: Identify correct tag for styles in Svelte

   Svelte uses the standard <style> tag for component styles, which are scoped by default.

2. Step 2: Check options for correct syntax

   <style> p { color: red; } </style> uses <style> with CSS inside, which is correct. <style global> p { color: red; } </style> uses <style global> which disables scoping. <css> p { color: red; } </css> uses invalid <css> tag. <style scoped> p { color: red; } </style> uses <style scoped> which is not valid in Svelte.

3. Final Answer:

   <style> p { color: red; } </style> -> Option D

4. Quick Check:

   Use <style> for scoped CSS [OK]

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

Common Mistakes:

• Using
• Confusing
• Using non-standard tags like <css>

3. Given this Svelte component code, what color will the paragraph text be?

<script>
  let color = 'blue';
</script>

<style>
  p { color: red; }
</style>

<p>Hello</p>

medium

A. Black (default)

B. Blue

C. Red

D. No color applied (transparent)

Solution

1. Step 1: Check the CSS style inside the component

   The style tag sets paragraph text color to red.

2. Step 2: Check if any inline or script color overrides exist

   The script variable 'color' is not used in the style or markup, so it does not affect the paragraph color.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   CSS inside <style> applies locally [OK]

Hint: CSS in <style> overrides default color unless overridden inline [OK]

Common Mistakes:

• Assuming script variable changes style automatically
• Thinking default black applies over CSS
• Confusing variable with CSS property

4. You wrote this Svelte component but the styles are affecting other components too. What is the likely problem?

<style global>
  h1 { font-size: 3rem; }
</style>

medium

A. Missing a closing tag for <style> causes global effect.

B. Using

C. Svelte does not support scoped styles by default.

D. The CSS selector h1 is invalid inside Svelte.

Solution

1. Step 1: Understand the effect of <style global>

   Using <style global> disables scoping and applies styles globally across all components.

2. Step 2: Identify why styles affect other components

   The global tag causes the h1 style to leak outside the component, affecting all h1 elements.

3. Final Answer:

   Using <style global> makes styles apply globally, not scoped. -> Option B

4. Quick Check:

   <style global> disables scoping [OK]

Hint: Avoid

Common Mistakes:

• Thinking missing tags cause global styles
• Believing Svelte disables scoped styles by default
• Assuming CSS selectors are invalid in Svelte

5. You want to style a button inside a Svelte component but also allow a global style to override it if needed. How can you write the styles to achieve this?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand how to combine scoped and global styles

   Svelte styles are scoped by default, but you can use :global() selector inside scoped styles to apply global CSS rules.

2. Step 2: Analyze options for correct usage

   <style> :global(button) { background: green; } </style> uses :global(button) inside scoped style, allowing global styles to override or apply to button elements. <style> button { background: green; } </style> scopes styles only locally. <style global> button { background: green; } </style> applies styles globally but does not allow local override. <style scoped> button { background: green; } </style> uses invalid <style scoped> tag.

3. Final Answer:

   <style> :global(button) { background: green; } </style> -> Option A

4. Quick Check:

   Use :global() inside <style> for global selectors [OK]

Hint: Use :global() inside <style> to mix scoped and global styles [OK]

Common Mistakes:

• Using
• Applying global styles without :global() inside scoped style
• Not knowing :global() allows global CSS inside scoped styles