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.