Script, markup, and style sections in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Svelte component?

Consider this Svelte component code:

<script>
  let count = 2;
</script>

<h1>Count is {count * 3}</h1>

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

What will you see on the page?

Svelte

<script>
  let count = 2;
</script>

<h1>Count is {count * 3}</h1>

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

A A black heading that says: Count is 2

B A blue heading that says: Count is 2

C A black heading that says: Count is 6

D A blue heading that says: Count is 6

💡 Hint

Remember the expression inside curly braces is evaluated.

The variable count is 2, multiplied by 3 gives 6. The style sets the heading color to blue.

📝 Syntax

intermediate

Which script section syntax is correct in Svelte?

Which of these script sections is valid in a Svelte component?

A <script export let name;> </script>

B <script> export let name; </script>

C <script context="module"> export let name; </script>

D <script context=module> export let name; </script>

💡 Hint

Look for correct attribute syntax and placement.

The script tag with no attributes is the component instance script where export let declares props. The context="module" script is for module-level code and cannot export props.

🔧 Debug

advanced

Why does this style not apply in Svelte?

Given this Svelte component:

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

<h2 class="title">Hello</h2>

<style>
  .title { color: {color}; }
</style>

Why does the heading not appear red?

Svelte

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

<h2 class="title">Hello</h2>

<style>
  .title { color: {color}; }
</style>

A The color variable is not declared in the script

B The class name is wrong, so style does not apply

C Svelte style tags do not support JavaScript variables inside CSS blocks

D The style tag must be inside the script tag

💡 Hint

Think about how CSS and JavaScript interact in Svelte.

Svelte does not allow JavaScript variables inside CSS blocks directly. To use dynamic styles, you must use inline styles or CSS variables.

🧠 Conceptual

advanced

What is the role of the