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.