HTML rendering with {@html} in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte code snippet:

<script>
  let content = '<strong>Hello</strong> World!';
</script>

<p>{@html content}</p>

What will be the visible output in the browser?

Svelte

<script>
  let content = '<strong>Hello</strong> World!';
</script>

<p>{@html content}</p>

A The literal text '<strong>Hello</strong> World!' including tags

B Hello World! with 'Hello' in bold

C An empty paragraph with no visible text

D A runtime error because of unsafe HTML

💡 Hint

Remember that {@html} inserts raw HTML, not escaped text.

The {@html} tag in Svelte inserts the string as HTML, so the <strong> tags make 'Hello' bold. The rest is normal text.

📝 Syntax

intermediate

Which option correctly uses {@html} in Svelte?

You want to render a variable named 'htmlString' as raw HTML inside a div. Which code snippet is correct?

A <div>{@html htmlString}</div>

B <div>{htmlString}</div>

C <div>{@html(htmlString)}</div>

D <div>{@html: htmlString}</div>

💡 Hint

Check the exact syntax for {@html} in Svelte.

The correct syntax is {@html variableName} without parentheses or colons.

🔧 Debug

advanced

Why does this Svelte code not render HTML tags correctly?

Given this code:

<script>
  let text = '<em>Italic</em> text';
</script>

<p>{text}</p>

Why does the browser show the tags as text instead of formatting?

Svelte

<script>
  let text = '<em>Italic</em> text';
</script>

<p>{text}</p>

A Because {text} escapes HTML tags, so they show as text

B Because the variable 'text' is not a string

C Because Svelte does not support HTML tags inside variables

D Because the <p> tag cannot contain HTML tags

💡 Hint

Think about how Svelte treats variables inside curly braces.

Svelte escapes HTML inside variables by default to prevent XSS. To render raw HTML, {@html} must be used.

❓ state_output

advanced

What happens when the HTML string changes dynamically?

In this Svelte component:

<script>
  let htmlContent = '<span>First</span>';
  function update() {
    htmlContent = '<span style="color:red">Updated</span>';
  }
</script>

<div>{@html htmlContent}</div>
<button on:click={update}>Change</button>

What will the user see after clicking the button?

Svelte

<script>
  let htmlContent = '<span>First</span>';
  function update() {
    htmlContent = '<span style="color:red">Updated</span>';
  }
</script>

<div>{@html htmlContent}</div>
<button on:click={update}>Change</button>

A The button click causes a runtime error

B The text remains 'First' and does not update

C The text changes from 'First' to 'Updated' in red color

D The HTML tags become visible as text after update

💡 Hint

Svelte updates the DOM when reactive variables change.

When the variable changes, Svelte re-renders the {@html} block with the new HTML, showing 'Updated' in red.

🧠 Conceptual

expert

What is a key risk of using {@html} in Svelte?

Why should you be careful when rendering user-generated content with {@html} in Svelte?

A It slows down rendering because it converts HTML to plain text

B It causes the app to crash if the HTML is too long

C It automatically escapes all HTML tags, so no formatting is possible

D It can introduce cross-site scripting (XSS) vulnerabilities if content is not sanitized

💡 Hint

Think about security risks when inserting raw HTML.

Using {@html} inserts raw HTML, so if the content is from users and not cleaned, malicious scripts can run.