Global vs scoped style strategies in Svelte - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

How does scoped styling affect component styles in Svelte?

Consider a Svelte component with styles defined inside a <style> tag without the global attribute. What happens to these styles?

Svelte

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

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

<p>This text is styled.</p>

A The styles apply globally to all <code>&lt;p&gt;</code> elements in the app.

B The styles apply only to elements inside this component, not affecting other components.

C The styles are ignored and do not apply anywhere.

D The styles apply only to elements outside this component.

💡 Hint

Think about how Svelte isolates styles by default to avoid conflicts.

By default, Svelte scopes styles to the component they are defined in. This means styles inside a <style> tag without global only affect that component's elements.

📝 Syntax

intermediate

Which syntax applies global styles in a Svelte component?

In Svelte, how do you write CSS inside a component so that it applies globally to the whole app?

A <style> :global(p) { color: blue; } </style>

B <style scoped> p { color: blue; } </style>

C <style> p { color: blue; } </style>

D <style global> p { color: blue; } </style>

💡 Hint

Remember Svelte uses a special :global() selector inside styles for global CSS.

In Svelte, to apply global styles inside a component's style block, you wrap selectors with :global().

🔧 Debug

advanced

Why does this global style not apply outside the component?

Given this Svelte component code, why does the h1 outside the component not turn green?

Svelte

<style>
  h1 { color: green; }
</style>

<h1>This is inside component</h1>

A Because styles without <code>:global()</code> are scoped and do not affect elements outside the component.

B Because the <code>h1</code> tag is invalid inside <code>&lt;style&gt;</code>.

C Because Svelte requires styles to be in a separate CSS file to apply globally.

D Because the component is missing a <code>global</code> attribute on the <code>&lt;style&gt;</code> tag.

💡 Hint

Think about how Svelte isolates styles by default.

Svelte scopes styles by default. Without :global(), styles only apply inside the component. So h1 outside remains unaffected.

❓ state_output

advanced

What color will the paragraph text be after clicking the button?

In this Svelte component, what color will the paragraph text show after clicking the button once?

Svelte

<script>
  let isGlobal = false;
  function toggle() {
    isGlobal = !isGlobal;
  }
</script>

<style>
  p { color: red; }
  :global(.global-style) { color: blue; }
</style>

<p class={isGlobal ? 'global-style' : ''}>Hello!</p>
<button on:click={toggle}>Toggle Style</button>

A Black, because no style applies after toggle.

B Red, because scoped styles override global styles.

C No color change, the text remains red.

D Blue, because the class 'global-style' applies a global blue color.

💡 Hint

Check how the class changes and how global styles apply.

When the button is clicked, isGlobal becomes true, adding the global-style class. The global CSS sets color: blue for that class, so the paragraph text turns blue.

🧠 Conceptual

expert

Why prefer scoped styles over global styles in Svelte for large apps?

Which reason best explains why scoped styles are generally preferred over global styles in large Svelte applications?

A Scoped styles require less CSS code overall, reducing file size significantly.

B Global styles load faster because they are cached once and reused everywhere.

C Scoped styles prevent style conflicts by isolating CSS to components, making maintenance easier.

D Global styles automatically update component state, improving reactivity.

💡 Hint

Think about how CSS conflicts happen in big projects.

Scoped styles isolate CSS to components, avoiding conflicts and making it easier to maintain and reason about styles in large apps. Global styles can cause unintended overrides and bugs.

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