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.