Svelte搭配Pug预处理器时动态组件的正确语法如何实现

你报错的核心原因是使用了错误的Svelte内置组件：

• <svelte:component> 是专门用来动态渲染Svelte组件的，要求this属性必须传入Svelte组件构造函数，你传入的是字符串类型的HTML标签名，框架尝试把字符串当作构造函数实例化，自然抛出Uncaught TypeError: switch_value is not a constructor错误。
• 如果你要动态渲染原生HTML标签，应该使用Svelte专门提供的<svelte:element>内置组件。

修正方案 #

1. 替换模板中的svelte:component为svelte:element，pug模板写法如下：

<template lang="pug">
  svelte:element.OverflowSafeSingleLineLabel(this="{rootElementTag}")
    span.OverflowSafeSingleLineLabel-TextWithIncreasedLineHeight
      slot
</template>

2. 调整脚本逻辑，如果需要将根标签作为可配置参数开放给父组件，将rootElementTag导出为普通props即可，不需要放在模块上下文（context="module"）中：

<script lang="ts">
  // 可配置根标签，默认值为div
  export let rootElementTag: string = "div";
</script>

修改后既保留了动态配置根元素标签的能力，也不会再触发构造函数相关的报错，和你直接写静态类名的渲染效果完全一致。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD