How to Use svelte:component for Dynamic Components

Use svelte:component to render a component dynamically by passing a component constructor to its this attribute. This lets you switch components at runtime based on variables or conditions.

Syntax

The svelte:component tag dynamically renders a Svelte component. You specify which component to render by setting the this attribute to a component variable or import.

Example parts:

• <svelte:component this={Component} />: Renders the component stored in Component.
• this: Required attribute that holds the component constructor.
• You can pass props to the dynamic component like normal components.

svelte

<svelte:component this={Component} {prop1} {prop2} />

Example

This example shows how to switch between two components dynamically using svelte:component. The displayed component changes when you click buttons.

svelte

<script>
  import RedBox from './RedBox.svelte';
  import BlueBox from './BlueBox.svelte';

  let currentComponent = RedBox;
</script>

<button on:click={() => currentComponent = RedBox}>Show Red</button>
<button on:click={() => currentComponent = BlueBox}>Show Blue</button>

<svelte:component this={currentComponent} />

<!-- RedBox.svelte -->
<!-- <script> export let color = 'red'; </script> -->
<!-- <div style="width:100px; height:100px; background-color: red;"></div> -->

<!-- BlueBox.svelte -->
<!-- <script> export let color = 'blue'; </script> -->
<!-- <div style="width:100px; height:100px; background-color: blue;"></div> -->

Output

Two buttons labeled 'Show Red' and 'Show Blue'. Clicking 'Show Red' displays a red square box. Clicking 'Show Blue' displays a blue square box.

Common Pitfalls

Common mistakes when using svelte:component include:

• Not passing a valid component to this. It must be a Svelte component constructor, not a string or HTML tag.
• Forgetting to import the components you want to render dynamically.
• Not passing required props to the dynamic component, causing errors or missing data.
• Trying to use svelte:component without reactive updates when the component variable changes.

svelte

<!-- Wrong: passing string instead of component -->
<svelte:component this="MyComponent" />

<!-- Right: pass imported component -->
<script>
  import MyComponent from './MyComponent.svelte';
</script>
<svelte:component this={MyComponent} />

Quick Reference

Attribute	Description
this	The component constructor to render dynamically (required)
props	Any props passed like normal components are forwarded to the dynamic component
event handlers	You can bind event handlers on svelte:component as usual
reactivity	Changing the this value updates the rendered component automatically

Key Takeaways

Use svelte:component with the this attribute to render components dynamically.

Always pass a valid Svelte component constructor, not a string or HTML tag, to this.

You can switch components at runtime by changing the variable bound to this.

Pass props and event handlers to svelte:component just like normal components.

Import all components you want to render dynamically to avoid runtime errors.