How to pass chidlren to a HTML element without overhead in Svelte 5

[x0k]

I want to create a thin wrapper around some html element, but can't pass the children snippet directly.

<script lang="ts">
  import type { HTMLAttributes } from "svelte/elements";
  const { children, ...props }: HTMLAttributes<HTMLButtonElement> = $props();
</script>

<!-- Doesn't work (also invalid html) -->
<button {...props} {children} />

<!-- Doesn't work -->
<button {...props} {children}></button>

<!-- Doesn't work (a little unexpected) -->
<button {...props}>{children}</button>

<!-- Works, but requires additional check -->
<button {...props}>
  {#if children}
    {@render children()}
  {/if}
</button>

[brunnerh]

This:

<button {...props}>{@render children?.()}</button>