动态 Svelte 组件和 Pug 预处理器的正确语法

Question

低于组件

<template lang="pug">

  svelte:component.OverflowSafeSingleLineLabel(this="{rootElementTag}")
    span.OverflowSafeSingleLineLabel-TextWithIncreasedLineHeight
      slot

</template>


<script lang="ts" context="module">

  const rootElementTag: string = "div";

</script>

原因

Uncaught TypeError: switch_value is not a constructor

如果尝试使用 is 作为子组件。

如果只是把根元素改成

.OverflowSafeSingleLineLabel

错误将消失。但是如何使 OverflowSafeSingleLineLabel 动态化呢？我希望这只是我的 Svelte 新手（2021 年）的错误。

Source code

Answer 1

我不太了解 pug 语法。但是如果 this 与 svelte:component 相关：您不能使用 svelte:component 动态创建 DOM 元素，您只能使用它来创建 Svelte 组件。要实现您想要的功能，您需要 svelte:element，一项尚未实现的即将推出的功能（截至 2021 年 11 月 23 日）。

动态 Svelte 组件和 Pug 预处理器的正确语法

Correct syntax for dynamic Svelte component and Pug pre-processor

pug

svelte