sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
80.13k stars 4.26k forks source link

Cannot pass `children` prop to `<svelte:element>` #13900

Open rChaoz opened 1 month ago

rChaoz commented 1 month ago

Describe the bug

I have a custom component where the user can choose the base element like so:

<script lang="ts" generics="T extends keyof SvelteHTMLElements = 'div'">
  import type { SvelteHTMLElements } from 'svelte/elements';

  type Props = SvelteHTMLElements[T] & {
    as?: T;
  };

  const { as = 'div' as T, ...rest }: Props = $props();
</script>

<svelte:element this={as} {...rest} />

I would expect that the children prop, if passed, is forwarded to the custom element. This does not happen, and I have to manually use a render tag inside the <svelte:element>. This is fine, as dynamic_void_element_content is a warning, not an error, but it would be nice if it didn't need to be done.

Reproduction

https://svelte.dev/playground/74a0f0b5d2a64a7d9eb0c1915a2cf458?version=5.1.1

Severity

annoyance

dummdidumm commented 1 month ago

children is not an attribute, so I don't think we should do that. But we should probably not emit the warning if you're just using a render tag within the element and it results to nothing.