Why svelte:component for dynamic components? - Purpose & Use Cases

The Big Idea

Discover how a single tag can make your app switch views like magic!

The Scenario

Imagine you want to show different parts of your app based on user choices, like switching between a login form, a profile view, or a settings page.

Doing this by hand means writing lots of if-else blocks and manually adding or removing components in your code.

The Problem

Manually swapping components is messy and hard to maintain.

You have to write repetitive code and it's easy to make mistakes, like forgetting to update something or causing flickers on the screen.

The Solution

The svelte:component tag lets you pick which component to show dynamically with a simple variable.

This means you write cleaner code and Svelte handles the switching smoothly for you.

Before vs After

✗ Before

if (page === 'login') { show LoginComponent } else if (page === 'profile') { show ProfileComponent }

✓ After

<svelte:component this={currentComponent} />

What It Enables

You can build flexible apps that change views instantly based on user actions, without messy code.

Real Life Example

Think of a dashboard app where clicking menu items instantly swaps the main content area to different tools or reports.

Key Takeaways

Manually switching components is repetitive and error-prone.

svelte:component lets you swap components easily using a variable.

This makes your code cleaner and your app more responsive.

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