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.