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.

Practice

1. What does the {@html} tag do in a Svelte component?

easy

A. It escapes HTML tags and shows them as plain text.

B. It renders a string as actual HTML inside the component.

C. It creates a new HTML element dynamically.

D. It comments out HTML code so it is not rendered.

Solution

1. Step 1: Understand {@html} purpose

   The {@html} tag tells Svelte to treat the string as HTML, not plain text.

2. Step 2: Compare with normal rendering

   Normally, Svelte escapes HTML tags to show them as text, but {@html} renders them as real HTML.

3. Final Answer:

   It renders a string as actual HTML inside the component. -> Option B

4. Quick Check:

   {@html} = renders HTML [OK]

Hint: Remember {@html} outputs HTML, not plain text [OK]

Common Mistakes:

• Thinking {@html} escapes HTML instead of rendering it
• Confusing {@html} with creating new elements
• Assuming {@html} comments out code

2. Which of the following is the correct syntax to render HTML stored in a variable htmlContent inside a Svelte component?

easy

A. <div>{@html htmlContent}</div>

B. <div>{@html(htmlContent)}</div>

C. <div>{htmlContent}</div>

D. <div>{#html htmlContent}{/html}</div>

Solution

1. Step 1: Recall correct {@html} syntax

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

2. Step 2: Check each option

   <div>{htmlContent}</div> renders as plain text, B uses invalid parentheses, D uses wrong block syntax.

3. Final Answer:

   <div>{@html htmlContent}</div> -> Option A

4. Quick Check:

   Correct {@html} syntax = {@html variable} [OK]

Hint: Use {@html variable} without parentheses or blocks [OK]

Common Mistakes:

• Adding parentheses around variable in {@html}
• Using block syntax like {#html}{/html}
• Not using {@html} and rendering raw string

3. Given this Svelte code:

  <script>
    let htmlString = '<strong>Hello</strong> <em>World</em>';
  </script>

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

What will be the rendered output in the browser?

medium

A. Hello World (plain text, no formatting)

B. <strong>Hello</strong> <em>World</em> (raw text)

C. Hello World (formatted text)

D. An error occurs because of unsafe HTML

Solution

1. Step 1: Understand {@html} rendering

   {@html renders the string as HTML, so tags become real formatting.

2. Step 2: Analyze the string content

   The string contains <strong> and <em> tags, so output will be bold and italic text.

3. Final Answer:

   <strong>Hello</strong> <em>World</em> (formatted text) -> Option C

4. Quick Check:

   HTML string renders as formatted text [OK]

Hint: {@html} renders tags as formatting, not raw text [OK]

Common Mistakes:

• Expecting tags to show as text instead of formatting
• Assuming plain text output without tags
• Thinking unsafe HTML causes runtime error

4. What is the main problem with this Svelte code?

  <script>
    let unsafeHtml = '';
  </script>

  <div>{@html unsafeHtml}</div>

medium

A. It can run unsafe scripts and cause security issues (XSS).

B. Svelte automatically sanitizes the HTML, so no problem.

C. The image will not display because of invalid src attribute.

D. It will cause a syntax error because of quotes inside the string.

Solution

1. Step 1: Identify unsafe HTML usage

   The string contains an image with an onerror event that runs JavaScript.

2. Step 2: Understand {@html} risks

   {@html renders raw HTML, so malicious scripts can run causing XSS security issues.

3. Final Answer:

   It can run unsafe scripts and cause security issues (XSS). -> Option A

4. Quick Check:

   {@html with unsafe HTML = security risk [OK]

Hint: Never use {@html} with untrusted content [OK]

Common Mistakes:

• Thinking Svelte sanitizes HTML automatically
• Assuming syntax error due to quotes inside string
• Believing image won't display due to src

5. You want to display user-generated content that may contain HTML tags safely in your Svelte app. Which approach is best?

hard

A. Wrap the user content in a <pre> tag and use {@html}.

B. Escape the user content and render it normally without {@html}.

C. Use {@html} directly on the user content to render formatting.

D. Sanitize the user content to remove unsafe tags, then use {@html}.

Solution

1. Step 1: Understand risks of raw {@html}

   Using {@html} directly on user content risks XSS attacks if content is unsafe.

2. Step 2: Best practice for safe HTML rendering

   Sanitize user content to remove dangerous tags/scripts, then render with {@html} for formatting.

3. Final Answer:

   Sanitize the user content to remove unsafe tags, then use {@html}. -> Option D

4. Quick Check:

   Sanitize first, then {@html} = safe rendering [OK]

Hint: Always sanitize user HTML before {@html} rendering [OK]

Common Mistakes:

• Using {@html} directly on raw user input
• Escaping content but losing formatting
• Using <pre> which shows raw text, not formatted HTML