svelte:component for dynamic components - Step-by-Step Execution

Concept Flow - svelte:component for dynamic components

Start

↓

Determine component to render

↓

Use <svelte:component this={component} />

↓

Render chosen component in DOM

↓

User interaction or state change

↓

Change component variable

↓

Re-render with new component

↓

End

This flow shows how Svelte dynamically chooses which component to render using <svelte:component> and updates when the chosen component changes.

Execution Sample

Svelte

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

<svelte:component this={component} />

This code renders component A initially, and can switch to component B by changing the 'component' variable.

Execution Table

Step	Action	Component Variable	Rendered Component	DOM Change
1	Initialize component variable	A	None yet	No DOM rendered
2	Render <svelte:component this={component} />	A	A	DOM shows component A content
3	User triggers change: component = B	B	A	No immediate DOM change
4	Svelte detects component change and re-renders	B	B	DOM updates to show component B content
5	No further changes	B	B	DOM remains showing component B

💡 No more changes; component variable stable at B, rendering stops updating.

Variable Tracker

Variable	Start	After Step 3	Final
component	A	B	B

Key Moments - 2 Insights

Why does the DOM update only after step 4, not immediately at step 3 when component changes?

At step 3, the variable changes but Svelte updates the DOM only after detecting the change and running the reactive update cycle at step 4, as shown in the execution_table.

Can <svelte:component> render any value assigned to 'component'?

No, 'component' must be a valid Svelte component or null. If invalid, rendering fails or shows nothing. The execution_table shows valid components A and B used.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered component at step 2?

A No component rendered

B Component A

C Component B

D Both components A and B

💡 Hint

Check the 'Rendered Component' column at step 2 in the execution_table.

At which step does the DOM update to show component B?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'DOM Change' column to see when the DOM updates to component B.

If the 'component' variable was set to null at step 3, what would happen to the DOM?

A DOM would show component A

B DOM would show component B

C DOM would show nothing (empty)

D DOM would show an error message

💡 Hint

Recall that renders nothing if 'this' is null, as implied by the variable_tracker and concept.

Concept Snapshot

<svelte:component this={component} />
- Dynamically renders the component assigned to 'component'
- Change 'component' variable to switch rendered component
- Useful for showing different UI parts without if/else
- 'component' must be a valid Svelte component or null
- DOM updates reactively when 'component' changes

Full Transcript

This visual execution trace shows how Svelte's <svelte:component> tag dynamically renders components based on a variable. Initially, the variable 'component' is set to component A, so the DOM renders A. When the variable changes to component B, Svelte detects this change and updates the DOM to render B. The variable tracker shows the 'component' variable changing from A to B. Key moments clarify that DOM updates happen after Svelte's reactive cycle, not immediately on variable assignment. The visual quiz tests understanding of which component renders at each step and what happens if the variable is null. This helps beginners see how dynamic components work in Svelte step-by-step.

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