mirror of https://github.com/sveltejs/svelte
34 lines
1.2 KiB
34 lines
1.2 KiB
---
|
|
title: <svelte:element>
|
|
---
|
|
|
|
```svelte
|
|
<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](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode:
|
|
|
|
```svelte
|
|
<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
|
|
<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.
|