Why special elements handle edge cases in Svelte - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the element behave with dynamic components?

Consider the following Svelte code using . What will be rendered when current is set to Button component?

Svelte

<script>
  import Button from './Button.svelte';
  import Label from './Label.svelte';
  let current = Button;
</script>

<svelte:component this={current} />

A The Label component is rendered regardless of the value of current.

B Nothing is rendered because <svelte:component> requires a string, not a component.

C An error is thrown because <svelte:component> cannot accept variables.

D The Button component is rendered in place of <svelte:component>.

💡 Hint

Think about how dynamically renders the component passed to it.

renders the component passed via the 'this' prop dynamically. Since current is set to Button, it renders Button.

❓ lifecycle

intermediate

What happens when listens to events?

Given this Svelte snippet, what is the effect of the element?

Svelte

<script>
  let width = 0;
  function updateWidth() {
    width = window.innerWidth;
  }
</script>

<svelte:window on:resize={updateWidth} />
<p>Window width: {width}</p>

A The code throws an error because on:resize is invalid on <svelte:window>.

B The width never updates because <svelte:window> cannot listen to events.

C The width updates whenever the browser window is resized.

D The width updates only once when the component mounts.

💡 Hint

Consider what does with event listeners.

attaches event listeners to the global window object, so on:resize triggers updateWidth on every resize.

📝 Syntax

advanced

What happens if wraps a {#each} block?

Examine this code snippet. What will happen?

Svelte

<script>
  let items = [1, 2, 3];
</script>

<svelte:fragment>
  {#each items as item}
    <p>{item}</p>
  {/each}
</svelte:fragment>

A No error; the fragment renders all items as paragraphs.

B SyntaxError: <svelte:fragment> must be inside another component or block.

C RuntimeError: Cannot use #each inside <svelte:fragment>.

D TypeError: items is not iterable.

💡 Hint

is designed to wrap Svelte blocks like {#each} without adding a DOM node.

No error; the fragment renders all items as paragraphs. allows control flow like {#each} at top level without a wrapper DOM element.

🔧 Debug

advanced

How does recursive behave here?

This component uses inside its markup. What best describes the behavior?

Svelte

<script>
  export let count = 0;
</script>

{#if count < 3}
  <svelte:self count={count + 1} />
{/if}
<p>Count: {count}</p>

A The component recursively renders itself until count reaches 3, causing multiple nested renders.

B The component does not render anything because <svelte:self> is invalid.

C The component renders only once because count is not reactive.

D The component throws a syntax error because <svelte:self> cannot have props.

💡 Hint

Think about how recursion works with and the count prop.

renders the same component recursively, increasing count each time until the condition fails at 3.

🧠 Conceptual

expert

Why does handle edge cases better than manual event listeners?

Which reason best explains why using for global events is preferred over adding event listeners manually in onMount?

A Because <svelte:window> only works with resize events, making it simpler.

B Because <svelte:window> automatically cleans up event listeners when the component unmounts, preventing memory leaks.

C Because manual event listeners cannot access window properties inside Svelte components.

D Because <svelte:window> runs event handlers outside the Svelte reactivity system, improving performance.

💡 Hint

Think about lifecycle and cleanup of event listeners.

automatically attaches and removes event listeners tied to the component lifecycle, avoiding common bugs like memory leaks.