What is svelte:element in Svelte: Dynamic Element Tag Explained

svelte:element is a special Svelte tag that lets you create HTML elements dynamically by specifying the tag name as a variable. It allows you to change the type of element rendered at runtime while still using Svelte's reactive and declarative features.

How It Works

Imagine you want to create a button sometimes, but other times you want to create a link or a div, all using the same code. Normally, HTML tags are fixed, but svelte:element lets you pick the tag name dynamically. You just give it a variable that holds the tag name, and Svelte renders that element.

This works like a flexible mold that can shape itself into any HTML element you want. You can also pass attributes and event handlers to it, just like a normal element. This makes your components more reusable and adaptable without repeating code for each tag type.

Example

This example shows how to use svelte:element to render different HTML tags based on a variable.

svelte

<script>
  let tag = 'button';
  let label = 'Click me';
</script>

<svelte:element this={tag} on:click={() => alert('Clicked!')} style="padding: 0.5rem 1rem; background: #007acc; color: white; border: none; cursor: pointer;">
  {label}
</svelte:element>

<button on:click={() => tag = tag === 'button' ? 'a' : 'button'} style="margin-top: 1rem;">
  Toggle Tag (button / a)
</button>

Output

Initially shows a blue button labeled 'Click me'. Clicking the button shows an alert 'Clicked!'. Clicking 'Toggle Tag' changes the element to an <a> tag styled like a button with the same label and behavior.

When to Use

Use svelte:element when you want a component to render different HTML tags based on data or user interaction. For example, you might build a button component that can also act as a link or a div container without duplicating code.

It is helpful in design systems or UI libraries where flexibility is key. Instead of writing separate components for each tag, you write one that adapts. This keeps your code DRY (Don't Repeat Yourself) and easier to maintain.

Key Points

• svelte:element lets you set the HTML tag dynamically with the this attribute.
• You can pass any attributes or event handlers to it like a normal element.
• It helps create flexible and reusable components without repeating markup.
• Use it when the element type needs to change based on props or state.

Key Takeaways

svelte:element enables dynamic HTML tags in Svelte components.

It accepts a variable tag name via the this attribute.

You can use it to build flexible, reusable UI components.

Attributes and events work normally on svelte:element.

Ideal for cases where element type changes based on data or props.