Search code examples
pugsvelte

Correct syntax for dynamic Svelte component and Pug pre-processor

Below component

<template lang="pug">

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

</template>


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

  const rootElementTag: string = "div";

</script>

causes

Uncaught TypeError: switch_value is not a constructor

if try to use is as child component.

If to change the root element just to

.OverflowSafeSingleLineLabel

the error will disappear. But how to make OverflowSafeSingleLineLabel dynamic? I hope it is just my, the novice (for 2021) in Svelte, mistake.

📄 Source code

Solution

  • I don't know much of the pug syntax. But if that this relates to svelte:component: You can't use svelte:component to dynamically create DOM elements, you can only use it to create Svelte components. To achieve what you want, you'll need svelte:element, an upcoming feature that is not yet implemented (as of 23.11.2021).