Svelte 5: cannot use `@render` for $$slots about svelte HOT 8 CLOSED

Is this what was intended?

REPL

from svelte.

Not really.

For example, if my-custom-element has a shadow root, it requires the <span slot="slot">Slotted</span> to have the slot attribute which is missing in you example.

from svelte.

The $$slots fields of props isn't really designed to be public. Can't you do as the error mentions and remove usage of <slot>? Is it just because you want to use the native <slot> element, not Svelte's?

from svelte.

I could also not use <slot> but I can't give up using the slot="" attribute because it is needed for the shadow DOM.
IMHO, there appears to be a consistency issue with the deprecation of slots in favour of snippets:

• if a component uses snippets, each child of the component instance should be rendered by the children function, even if it has slot="" attribute (REPL)
• otherwise, we should be able to combine both snippets and <slot name="" /> on the component side (REPL)
• or, at least, be able to render slots from the $$slots property

Now that the slots are deprecated, if they were to be removed in the next major iteration I'd assume the first behavior would be the preferred one.

from svelte.

You can create a wrapper in which you use snippets, and forward that to the custom element using slot syntax. Example REPL. Doesn't that solve your issue?

from svelte.

It can certainly work in most cases, but wrapping an element to be slotted with a span or a div cannot always lead to the desired behavior. It therefore seems to me (but I remain in the realm of personal opinion, make of that what you will 😄) that the current implementation partially conflicts anyway.

Is there any technical reason why nodes with the slot="" attribute cannot flow into children when the component uses runes, since we are not able to render those elements <slot /> or with @render?

from svelte.

The problem is that slot=".." syntax is used for Svelte components and there's no way to know that you mean "leave this untouched" when written like that. What we could do is to allow slot=".." attributes inside snippets. Then you could write this:

<script>
	import Component from './Component.svelte';
</script>

<Component>
	{#snippet children()}
		Hello world!
		<span slot="slot">Slotted</span>
	{/snippet}
</Component>

Once the Svelte 4 syntax is gone completely, you'll be able to use slot attributes like normal, but until then the more common use case is that someone accidentally uses of Svelte slot syntax.

from svelte.

Once the Svelte 4 syntax is gone completely, you'll be able to use slot attributes like normal, but until then the more common use case is that someone accidentally uses of Svelte slot syntax.

It wont work anyway because after #12207 it is impossibile to create a component with runes that supports slotted element. Right now, if "someone accidentally uses of Svelte slot syntax" the slotted element is never rendered without any warning.

IMHO, automatically finding slotted elements within the children property when the component uses runes offers a much clearer syntax and is more future ready (it requires no changes once the Svelte 4 syntax is removed).

from svelte.