Dynamic

<dynamic> renders the element or component named by is, and swaps it when is changes.

<Dynamic> is the same component.

source

<script>
let tag = 'h3'
</script>

<select bind:value={tag}>
  <option value="h3">h3</option>
  <option value="em">em</option>
  <option value="code">code</option>
</select>

<dynamic is={tag}>I am a &lt;{tag}&gt;</dynamic>

output

I am a <h3>

Props

Prop	Type	Description
`is`	`string \| null`	A lowercase name is an HTML element; a PascalCase name is one of your components. `null` or `""` renders nothing.
everything else	any	Passed straight through to whatever gets rendered.

Rendering a Component by Name

Same prop, PascalCase value:

source

<script>
let cardType = 'UserCard'
let user = { name: 'Alice' }
</script>

<!-- Renders: <UserCard user={user} /> -->
<dynamic is={cardType} user={user} />

The Pattern It Exists For

One component that renders as a different element depending on its props - a button that becomes a link when it is given an href, a heading whose level is set by the caller.

Without <dynamic> that is a branch per tag.

source

<script>
// A button when there is no href, a link when there is one.
let href = null
</script>

<dynamic is={href ? 'a' : 'button'} href={href}>Submit</dynamic>

<style>
  button {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
  }
</style>

output

Use Switch instead when the branches have different structures. <dynamic> is for the same structure under a different tag.