Skip to main content

<svelte:element>

<svelte:element this={expression} />

<svelte:element> 元素允许你渲染一个未知的元素,例如该元素来自 CMS。存在的任何属性和事件监听器都将应用于该元素。

唯一支持的绑定是 bind:this,因为 Svelte 的内置绑定不适用于通用元素。

如果 this 是空值(nullish value),该元素及其子元素都不会被渲染。

如果 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 元素标签,像 #textsvelte:head 这样的内容将不能正常运行。

在 GitHub 编辑此页面

上一页 下一页