Scoped styles by default in Svelte - Step-by-Step Execution

Concept Flow - Scoped styles by default

Write CSS in <style> tag

↓

Svelte compiler processes styles

↓

Add unique attribute selectors to CSS rules

↓

Add same unique attribute to component HTML elements

↓

Browser applies styles only to this component's elements

↓

Styles do NOT affect other components

Svelte automatically makes styles apply only to the component by adding unique markers to CSS and HTML.

Execution Sample

Svelte

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

<style>
  p { color: var(--color); }
</style>

<p style="--color: {color}">Hello</p>

This Svelte component styles its paragraph text red using scoped styles.

Execution Table

Step	Action	CSS Selector	HTML Element	Unique Attribute Added	Effect
1	Read <style> block	p	N/A	No	Prepare CSS rules
2	Compile CSS	p	N/A	Yes, e.g. svelte-abc123	CSS selector becomes p[svelte-abc123]
3	Compile HTML	N/A	<p>	Yes, add svelte-abc123 attribute	HTML element marked for scoped style
4	Render in browser	p[svelte-abc123]	<p svelte-abc123>	Yes	Style applies only to this <p>
5	Other components	p	<p>	No	No style applied to other components' <p>
6	Exit	N/A	N/A	N/A	Scoped styles isolate CSS to component

💡 All styles are scoped by adding unique attributes, so they only apply to this component's elements.

Variable Tracker

Variable	Start	After Compilation	After Render	Final
CSS Selector	p	p[svelte-abc123]	p[svelte-abc123]	p[svelte-abc123]
HTML Element	<p>	<p svelte-abc123>	<p svelte-abc123>	<p svelte-abc123>
Style Application	None	Prepared	Applied to <p svelte-abc123>	Scoped to component only

Key Moments - 2 Insights

Why doesn't the style affect paragraphs in other components?

Because during compilation, Svelte adds a unique attribute to both CSS selectors and HTML elements in this component only, as shown in execution_table step 2 and 3.

What happens if I write global styles inside the <style> tag?

By default, styles are scoped. To write global styles, you must use the :global() selector. Otherwise, styles get unique attributes and only apply inside the component.

Visual Quiz - 3 Questions

Look at the execution table, at which step does Svelte add the unique attribute to the CSS selectors?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Check the 'Unique Attribute Added' column in the execution_table rows.

According to the variable tracker, what is the final form of the HTML element after rendering?

A <p>

B <p svelte-abc123>

C <p class='svelte-abc123'>

D <p style='color:red'>

💡 Hint

Look at the 'HTML Element' row in variable_tracker under 'Final' column.

If the unique attribute was not added to the HTML element, what would happen to the styles?

A Styles would not apply to any element

B Styles would apply only to this component

C Styles would apply globally to all <p> elements

D Styles would cause an error

💡 Hint

Refer to execution_table step 5 and 6 about style application scope.

Concept Snapshot

Svelte scopes styles by default.
It adds unique attributes to CSS selectors and HTML elements.
This isolates styles to the component.
Use :global() for global styles.
No extra syntax needed for scoped styles.

Full Transcript

In Svelte, styles written inside the <style> tag are scoped automatically. The compiler adds a unique attribute to CSS selectors and the component's HTML elements. This ensures styles apply only inside the component, preventing them from affecting other parts of the app. For example, a <p> tag styled in one component won't style <p> tags elsewhere. This process happens during compilation before the browser renders the page. To write global styles, you must explicitly use the :global() selector. Scoped styles help keep components visually independent and avoid style conflicts.

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