<svelte:element>

<svelte:element this={expression} />

Элемент <svelte:element> позволяет отображать элемент, который неизвестен на момент написания кода, например, потому что он поступает из CMS. Любые свойства и обработчики событий будут применены к этому элементу.

Единственная поддерживаемая привязка — это bind:this, так как встроенные привязки Svelte не работают с универсальными элементами.

Если this имеет значение null или undefined, элемент и его дочерние элементы не будут отображены.

Если this — это имя пустого элемента (например, br), и <svelte:element> содержит дочерние элементы, в режиме разработки будет выброшена ошибка среды выполнения:

<script>
  let tag = $state('hr');
</script>

<svelte:element this={tag}>
  Этот текст не может находиться внутри элемента `hr`
</svelte:element>

Svelte старается максимально точно определить правильное пространство имён на основе окружения элемента, но это не всегда возможно. Вы можете явно указать его с помощью атрибута xmlns:

<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />

this должен быть допустимым тегом DOM-элемента. Такие значения, как #text или svelte:head, не будут работать.