Workaround for applying use:route dynamically with <svelte:element>

[SlimBeji]

Hello,

I am learning Vue3 and Svelte5 at the moment.

When building a custom <Button /> component, it could be a <button>, an <a> or a "vue-router" <RouterLink>.

This Vue3 code works well:

<component
        :is="tagConfig.tag"
        v-bind="tagConfig.props"
        :class="['btn', colorClass, inverseClass, customClasses]"
        @click="clickHandler"
    >
        <slot />
</component>

I am facing problems translating this code to its svelte5 equivalent using the <svelte:element>, because If my button is a "Router Link", I need to apply the use:route directive.

I have this code working well:

{#if tagConfig.useRoute}
    <svelte:element
        this={tagConfig.tag}
        {...tagConfig.props}
        use:route
        class={clsx(["btn", colorClass, inverseClass, customClasses])}
        onclick={clickHandler}
    >
        {@render props.children()}
    </svelte:element>
{:else}
    <svelte:element
        this={tagConfig.tag}
        {...tagConfig.props}
        class={clsx(["btn", colorClass, inverseClass, customClasses])}
        onclick={clickHandler}
    >
        {@render props.children()}
    </svelte:element>
{/if}

but you see the only difference is the "use:route" is applied in the first case and omitted in the else section.

Is there a way to avoid the if/else block and apply the use:route dynamically depending on the props my component received ??

Maybe make use:route accepting a boolean "false"

Thanks