Svelte • Special elements
<svelte:element>
<svelte:element this={expression} />The <svelte:element> element lets you render an element that is unknown at author time, for example because it comes from a CMS. Any properties and event listeners present will be applied to the element.
The only supported binding is bind:this, since Svelte’s built-in bindings do not work with generic elements.
If this has a nullish value, the element and its children will not be rendered.
If this is the name of a void element (e.g., br) and <svelte:element> has child elements, a runtime error will be thrown in development mode:
<script lang="ts">
let let tag: stringtag = function $state<"hr">(initial: "hr"): "hr" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
$function $state<"hr">(initial: "hr"): "hr" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
state('hr');
</script>
<svelte:element this={let tag: stringtag}>
This text cannot appear inside an hr element
</svelte:element><script>
let let tag: stringtag = function $state<"hr">(initial: "hr"): "hr" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
$function $state<"hr">(initial: "hr"): "hr" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
state('hr');
</script>
<svelte:element this={let tag: stringtag}>
This text cannot appear inside an hr element
</svelte:element>Svelte tries its best to infer the correct namespace from the element’s surroundings, but it’s not always possible. You can make it explicit with an xmlns attribute:
<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />this needs to be a valid DOM element tag, things like #text or svelte:head will not work.