Scoped styles by default in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How do scoped styles behave in Svelte components?

Consider two Svelte components, Parent.svelte and Child.svelte. Parent.svelte has a <style> block defining p { color: red; }. If Parent renders Child, what color will the paragraph text inside Child be?

Svelte

<!-- Parent.svelte -->
<p>This is parent text.</p>
<Child />
<style>
  p { color: red; }
</style>

<!-- Child.svelte -->
<p>This is child text.</p>

A Both paragraphs will be red because styles cascade globally.

B Only the parent paragraph will be red; the child paragraph uses default color because styles are scoped.

C Only the child paragraph will be red; the parent paragraph uses default color because styles are scoped.

D Neither paragraph will be red because styles are ignored in child components.

💡 Hint

Think about how Svelte applies styles only to the component they are declared in.

Svelte scopes styles by default. The p { color: red; } style in Parent.svelte applies only to its own p elements. The paragraph text inside Child.svelte uses the default color because the parent's styles do not leak into child components.

📝 Syntax

intermediate

Which style block syntax scopes styles in Svelte?

Which of the following <style> blocks in a Svelte component will scope styles only to that component?

A

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

B

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

C

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

D

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

💡 Hint

In Svelte, styles are scoped by default without extra attributes.

In Svelte, the plain <style> block automatically scopes styles to the component. Adding global makes styles global. The scoped attribute is not valid in Svelte. The module attribute is for CSS modules, which is a different feature.

🔧 Debug

advanced

Why does this style leak outside the component?

Given this Svelte component, why does the h1 style affect elements outside this component?

Svelte

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

<h1>Title</h1>

A Because the <code>h1</code> tag is outside the component's root element.

B Because Svelte does not support scoped styles for <code>h1</code> elements.

C Because the style block is missing the <code>scoped</code> attribute.

D Because the <code>global</code> attribute makes styles apply globally, ignoring scoping.

💡 Hint

Check the effect of the global attribute on styles.

The global attribute on the <style> block disables scoping and applies styles globally. This causes the h1 style to affect all h1 elements in the app, not just inside this component.

❓ state_output

advanced

What color will the paragraph be after toggling the class?

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

Svelte

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

<p class:highlight={active}>Hello!</p>
<button on:click={toggle}>Toggle</button>

<style>
  p { color: black; }
  .highlight { color: orange; }
</style>

A The paragraph text will be orange.

B The paragraph text color will not change.

C The paragraph text will be invisible.

D The paragraph text will be black.

💡 Hint

Consider how the class directive class:highlight works with the active variable.

Initially, active is false, so the highlight class is not applied. After clicking the button once, active becomes true, adding the highlight class. This changes the paragraph color to orange as defined in the scoped styles.

🧠 Conceptual

expert

How does Svelte ensure styles are scoped to components?

Which mechanism does Svelte use internally to scope styles to components by default?

A It uses JavaScript to dynamically inject inline styles at runtime.

B It wraps each component in an iframe to isolate styles.

C It adds unique attribute selectors to HTML elements and styles during compilation.

D It requires developers to manually prefix all CSS selectors.

💡 Hint

Think about how Svelte compiles components and applies styles.

Svelte compiles components by adding unique attributes to elements and matching CSS selectors with those attributes. This ensures styles apply only to elements in that component without runtime overhead or iframes.

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