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.

Practice

1. What does the svelte:component tag do in Svelte?

easy

A. It imports components from external libraries.

B. It creates a new Svelte component file.

C. It renders a component dynamically based on a variable.

D. It styles components with CSS.

Solution

1. Step 1: Understand the purpose of svelte:component

   This tag is used to render different components dynamically depending on a variable's value.

2. Step 2: Compare with other options

   Creating files, styling, or importing are unrelated to svelte:component.

3. Final Answer:

   It renders a component dynamically based on a variable. -> Option C

4. Quick Check:

   svelte:component = dynamic rendering [OK]

Hint: Remember: svelte:component means dynamic component rendering [OK]

Common Mistakes:

• Thinking it creates new component files
• Confusing it with CSS styling
• Assuming it imports components

2. Which of the following is the correct syntax to render a dynamic component stored in variable CurrentComp?

easy

A. <component this={CurrentComp} />

B. <svelte:component this={CurrentComp} />

C. <svelte:component src={CurrentComp} />

D. <Component this={CurrentComp} />

Solution

1. Step 1: Recall correct tag and attribute

   The correct tag is svelte:component and the attribute to specify the component is this.

2. Step 2: Check each option

   <svelte:component this={CurrentComp} /> uses correct tag and attribute syntax. Others use wrong tags or attributes.

3. Final Answer:

   <svelte:component this={CurrentComp} /> -> Option B

4. Quick Check:

   Correct tag and this attribute = <svelte:component this={CurrentComp} /> [OK]

Hint: Use svelte:component this={variable} for dynamic components [OK]

Common Mistakes:

• Using component instead of svelte:component
• Using src instead of this
• Capitalizing tags incorrectly

3. Given the code:

  <script>
    import A from './A.svelte';
    import B from './B.svelte';
    let comp = A;
  </script>

  <svelte:component this={comp} />

  <button on:click={() => comp = B}>Switch</button>

What happens when the button is clicked?

medium

A. The displayed component switches from A to B.

B. Nothing changes because comp is not reactive.

C. An error occurs because components cannot be switched dynamically.

D. Both components A and B render at the same time.

Solution

1. Step 1: Understand the initial rendering

   The variable comp starts as component A, so A renders initially.

2. Step 2: Analyze the button click

   Clicking the button sets comp to B, which triggers Svelte to render component B dynamically.

3. Final Answer:

   The displayed component switches from A to B. -> Option A

4. Quick Check:

   Dynamic this changes component = The displayed component switches from A to B. [OK]

Hint: Changing this variable updates the rendered component [OK]

Common Mistakes:

• Thinking dynamic components can't switch
• Assuming comp is not reactive
• Expecting both components to render simultaneously

4. What is wrong with this code snippet?

<script>
  import X from './X.svelte';
  let comp = 'X';
</script>

<svelte:component this={comp} />

medium

A. You cannot use variables inside this.

B. The import statement is incorrect.

C. The svelte:component tag must be self-closing.

D. The variable comp should hold the component, not a string.

Solution

1. Step 1: Check the type of comp

   The variable comp is assigned the string 'X', but it should hold the imported component itself.

2. Step 2: Understand this attribute requirements

   this expects a component reference, not a string name.

3. Final Answer:

   The variable comp should hold the component, not a string. -> Option D

4. Quick Check:

   this needs component, not string [OK]

Hint: Assign component imports, not strings, to this [OK]

Common Mistakes:

• Assigning component name as string
• Thinking svelte:component can't be self-closing
• Believing variables can't be used in this

5. You want to render a dynamic component with props. Given components Cat and Dog both accept a name prop, how do you pass name="Buddy" to the dynamic component stored in petComp?

hard

A. <svelte:component this={petComp} name="Buddy" />

B. <svelte:component this={petComp} {name}="Buddy" />

C. <svelte:component this={petComp} props={{name: 'Buddy'}} />

D. <svelte:component this={petComp} bind:name="Buddy" />

Solution

1. Step 1: Recall how to pass props to components

   Props are passed as attributes directly on the component tag, including svelte:component.

2. Step 2: Check each option's syntax

   <svelte:component this={petComp} name="Buddy" /> correctly passes name="Buddy". <svelte:component this={petComp} {name}="Buddy" /> uses invalid syntax. <svelte:component this={petComp} props={{name: 'Buddy'}} /> tries to pass props as an object, which is not supported. <svelte:component this={petComp} bind:name="Buddy" /> uses bind: incorrectly.

3. Final Answer:

   <svelte:component this={petComp} name="Buddy" /> -> Option A

4. Quick Check:

   Pass props as attributes on svelte:component [OK]

Hint: Pass props like normal attributes on svelte:component [OK]

Common Mistakes:

• Trying to pass props as an object
• Using bind: incorrectly
• Using curly braces around prop name with value