mirror of
https://github.com/sveltejs/svelte.git
synced 2024-12-01 01:11:24 +01:00
4f6bb41030
* fix * link * more docs stuff * more * more * fix * more * more * fix * fix * more * ffs * FML
1.1 KiB
1.1 KiB
| title |
|---|
| <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>
let tag = $state('hr');
</script>
<svelte:element this={tag}>
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" />