svelte:component for dynamic components - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte code render?

Given the following Svelte code using <svelte:component>, what will be displayed on the page?

Svelte

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

<svelte:component this={current} text="Click me" />

A A link with the label 'Click me' is shown.

B A button with the label 'Click me' is shown.

C Nothing is shown because 'current' is not a string.

D An error occurs because 'this' attribute is missing.

💡 Hint

Look at the value of current and which component it points to.

The this attribute in <svelte:component> dynamically renders the component assigned to current. Since current is Button, the Button component renders with the given text.

📝 Syntax

intermediate

Which option correctly uses <svelte:component> to render a dynamic component?

Choose the correct syntax to render a dynamic component stored in the variable componentVar with a prop title set to 'Hello'.

A <svelte:component this="componentVar" title="Hello" />

B <svelte:component component={componentVar} title="Hello" />

C <svelte:component this={componentVar} title="Hello" />

D <svelte:component this={componentVar} {title="Hello"} />

💡 Hint

The this attribute expects a component reference, not a string or a different attribute name.

The correct syntax uses this={componentVar} to tell Svelte which component to render dynamically. Other options either use wrong attribute names or incorrect value types.

❓ state_output

advanced

What is the output after clicking the button twice?

Consider this Svelte component that switches between two components dynamically on button click. What text is shown after clicking the button twice?

Svelte

<script>
  import A from './A.svelte';
  import B from './B.svelte';
  let current = A;
  function toggle() {
    current = current === A ? B : A;
  }
</script>

<button on:click={toggle}>Switch</button>
<svelte:component this={current} />

A The component A is shown.

B An error occurs because toggle is not bound.

C No component is shown because current is undefined.

D The component B is shown.

💡 Hint

Think about how the toggle function changes current each click.

Starting with current = A, first click changes it to B, second click changes it back to A. So after two clicks, component A is shown.

🔧 Debug

advanced

Why does this code cause a runtime error?

Examine the code below. Why does it cause a runtime error when rendered?

Svelte

<script>
  let componentName = 'MyComponent';
</script>

<svelte:component this={componentName} />

A Because the component name must be lowercase.

B Because <code>componentName</code> is not imported.

C Because <code>svelte:component</code> cannot be used without props.

D Because <code>this</code> expects a component, not a string variable.

💡 Hint

Check the type of value passed to this in <svelte:component>.

The this attribute requires a component reference (an imported component or a variable holding a component), not a string with the component's name. Passing a string causes a runtime error.

🧠 Conceptual

expert

How does <svelte:component> improve component reuse?

Which statement best explains the benefit of using <svelte:component> for dynamic components?

A It allows rendering different components dynamically without writing multiple conditional blocks.

B It automatically optimizes component rendering for better performance.

C It replaces the need for importing components explicitly in the script.

D It enables components to be styled globally without scoped CSS.

💡 Hint

Think about how dynamic rendering reduces repetitive code.

<svelte:component> lets you choose which component to render at runtime using a variable. This avoids writing many {#if} blocks and makes code cleaner and more reusable.