Global vs scoped style strategies in Svelte - Visual Side-by-Side Comparison

Concept Flow - Global vs scoped style strategies

Write styles in <style> tag

↓

Is style scoped?

No→Apply styles globally to all matching elements

Yes↓

Svelte adds unique attribute to elements

↓

Styles apply only to elements with that attribute

↓

Component renders with scoped styles

↓

Other components unaffected by scoped styles

Styles in Svelte can be global or scoped. Scoped styles get a unique attribute to apply only inside the component, while global styles affect all matching elements.

Execution Sample

Svelte

<script>
  // No script needed
</script>

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

<p>Hello</p>

This Svelte component styles the paragraph text red. By default, styles are scoped to this component only.

Execution Table

Step	Action	Style Target	Effect	Notes
1	Parse <style> tag	p selector	Prepare style rules	Styles read from component
2	Check if styles are scoped	Yes (default)	Add unique attribute to p elements	Svelte adds e.g. svelte-xyz attribute
3	Render <p>Hello</p>	p[svelte-xyz]	Text color set to red	Only this component's p affected
4	Other components render <p>	p without attribute	No red color applied	Scoped styles do not leak
5	If style marked :global(p)	p selector globally	All p elements red	Overrides scoped behavior
6	Component updates	p[svelte-xyz]	Style remains scoped	Scoped styles persist
7	Component unmounts	Remove p[svelte-xyz]	Scoped styles removed	No leftover styles
8	End	-	-	Component lifecycle ends

💡 Component unmounts, scoped styles removed, global styles remain if used

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 7
styleScope	undefined	unique attribute added	applied to p element	removed on unmount
pElement	not rendered	rendered with attribute	styled red	removed

Key Moments - 3 Insights

Why does the paragraph text turn red only inside this component?

Because Svelte adds a unique attribute to elements and styles, so styles apply only to elements with that attribute (see execution_table step 2 and 3).

What happens if I use :global in my style?

The style applies to all matching elements in the app, ignoring the unique attribute, making it global (see execution_table step 5).

Do scoped styles affect other components?

No, scoped styles only apply inside the component because of the unique attribute, so other components remain unaffected (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what attribute does Svelte add to scope styles?

A A class named 'scoped-style'

B A unique class like svelte-xyz

C An id attribute 'style-scope'

D No attribute is added

💡 Hint

Check step 2 in the execution_table where the unique attribute is added

At which step do styles apply only to this component's paragraph?

A Step 3

B Step 5

C Step 1

D Step 7

💡 Hint

Look at step 3 where the paragraph is rendered with the unique attribute and styled

If you change the style to :global(p), what changes in the execution?

A Styles apply only inside the component

B Styles are removed on unmount

C Styles apply globally to all paragraphs

D No styles are applied

💡 Hint

See step 5 where :global makes styles apply to all matching elements

Concept Snapshot

Svelte styles are scoped by default.
Svelte adds a unique attribute to elements and styles.
Scoped styles apply only inside the component.
Use :global() to write global styles.
Scoped styles do not affect other components.
Scoped styles are removed when component unmounts.

Full Transcript

In Svelte, styles inside a component are scoped by default. This means Svelte adds a unique attribute to the HTML elements and the CSS selectors so that styles apply only inside that component. For example, a paragraph styled red inside one component will not be red in others. If you want styles to be global, you use the :global() modifier in your CSS. Scoped styles are removed when the component is removed from the page, so they do not leak. This keeps styles clean and prevents conflicts between components.

Practice

1. In Svelte, what does it mean when styles are scoped by default?

easy

A. Styles apply globally to all components in the app.

B. Styles apply only to the current component, not affecting others.

C. Styles are ignored unless marked as global.

D. Styles must be written in a separate CSS file.

Solution

1. Step 1: Understand Svelte's default style behavior

   Svelte automatically scopes styles to the component they are written in, preventing them from affecting other components.

2. Step 2: Compare with global styles

   Global styles affect the entire app, but Svelte requires explicit marking for global styles, so default is scoped.

3. Final Answer:

   Styles apply only to the current component, not affecting others. -> Option B

4. Quick Check:

   Scoped styles = component-only styles [OK]

Hint: Remember: Svelte isolates styles by default [OK]

Common Mistakes:

• Thinking styles apply globally without marking
• Confusing scoped with global styles
• Assuming styles must be external

2. Which of the following is the correct way to write a global style inside a Svelte component's <style> block?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify how to mark global styles in Svelte

   Svelte uses the :global() pseudo selector inside the style block to mark styles as global.

2. Step 2: Check each option

   is scoped by default. uses an invalid attribute. mixes scoped attribute (not valid) with :global(). Only correctly uses :global().

3. Final Answer:

   <style> :global(.btn) { color: red; } </style> -> Option A

4. Quick Check:

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

Hint: Use :global() inside style block for global CSS [OK]

Common Mistakes:

• Using invalid <style> attributes like global or scoped
• Forgetting to wrap selectors in :global()
• Assuming all styles are global by default

3. Given this Svelte component code, what color will the <h1> text be?

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

<style>
  h1 { color: blue; }
  :global(h1) { color: red; }
</style>

<h1>Hello</h1>

medium

A. Red

B. Black (default)

C. Blue

D. Both blue and red, causing a gradient

Solution

1. Step 1: Understand style precedence in Svelte

   The scoped style h1 { color: blue; } compiles to something like h1.svelte-abc { color: blue; } which has higher specificity. The :global(h1) { color: red; } compiles to h1 { color: red; }.

2. Step 2: Determine final color

   Both rules apply to the component's h1, but the scoped rule has higher specificity (element + class vs element only), so the text will be blue.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Scoped styles have higher specificity than plain global styles [OK]

Hint: Scoped styles have higher specificity than global styles [OK]

Common Mistakes:

• Thinking global styles override scoped styles
• Assuming global styles have higher specificity
• Ignoring the unique class added by Svelte scoping

4. You wrote this Svelte style block but the global style is not applying:

<style>
  global(.title) { font-weight: bold; }
</style>

What is the error and how to fix it?

medium

A. Wrap the style block in a <global> tag instead of <style>.

B. Add the attribute global to the style tag like <style global>.

C. No error; the style will apply globally as written.

D. Use :global(.title) instead of global(.title) to apply global styles.

Solution

1. Step 1: Identify the syntax for global styles in Svelte

   Svelte requires the :global() pseudo selector inside the style block to mark styles as global, not just global().

2. Step 2: Correct the syntax

   Replace global(.title) with :global(.title) to apply the style globally.

3. Final Answer:

   Use :global(.title) instead of global(.title) to apply global styles. -> Option D

4. Quick Check:

   Global styles need :global() syntax [OK]

Hint: Use :global() not global() inside style block [OK]

Common Mistakes:

• Using global() instead of :global()
• Trying to add global attribute to style tag incorrectly
• Assuming styles are global by default

5. You want to apply a global font style to all paragraphs in your Svelte app but keep button styles scoped. Which approach is correct?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify how to apply global styles selectively

   To make paragraph styles global, wrap the selector in :global(). Button styles remain scoped by default.

2. Step 2: Evaluate each option

   applies both styles scoped (not global). correctly applies global to paragraphs only. uses invalid global attribute. incorrectly makes button styles global.

3. Final Answer:

   <style> :global(p) { font-family: Arial; } button { color: blue; } </style> -> Option A

4. Quick Check:

   Use :global() only on selectors needing global scope [OK]

Hint: Wrap only global selectors with :global() [OK]

Common Mistakes:

• Making all styles global unintentionally
• Using invalid style tag attributes
• Forgetting :global() for global styles