Svelte: <slot slot="…"> (for passing slots through to child components) silently fails

[chris-morgan]

Demo: https://v3.svelte.technology/repl?version=3.0.0-beta.3&gist=853e7d404576d323ca476f7db99ee3d0

It’s reasonable to want to pass a slot through to a child component; the natural way to do this without adding a new DOM node is like this:

<slot name="foo" slot="foo"></slot>

Unfortunately, this doesn’t work, and silently does doesn’t render the slot.

The current workaround is the same as for using components as a slot: create a regular DOM element and use that as the slot:

<div slot="foo">
    <slot name="foo"></slot>
</div>

Vaguely related to #1037/#1713 which are about slot not yet working on components (it currently explicitly fails at compile time with a helpful message, which is a much happier failure mode).

[chris-morgan]

Turns out my workaround doesn’t work properly either: when you try to fill the passed-through slot, reactivity stops working. Demo updated to demonstrate this.

So it looks as though passing slots through to child components is just completely broken in mostly invisible ways at present.

[Rich-Harris]

Updated REPL — this now works, though <slot name="foo" slot="foo"> still fails: https://svelte.dev/repl/29649e0f38c142629ef4ef6ed26c4bba?version=3.6.2

Relatedly it would be useful to be able to 'forward' slots including unknown ones (so that the <Message> in this example doesn't need to know about what slots <Greeting> expects)

[briancray]

Would love to see passthrough slots to create superset components, for example Table and TableWithPagination (table slots for TableWithPagination could be passed through to Table).

[Conduitry]

In 3.29.0 you can now use <slot slot='...'> to forward slots into a child component, without adding DOM elements.

[galangel]

edit: so it's only for un-named slots?

Is it really working? can someone share a working REPL ?

[zeng450026937]

@Conduitry still not working in ver 3.29.0.
slot attr causing compiler throw validation error: Element with a slot='...' attribute must be a child of a component or a descendant of a custom element

[damianpumar]

@Conduitry still not working in ver 3.29.0.
slot attr causing compiler throw validation error: Element with a slot='...' attribute must be a child of a component or a descendant of a custom element

Yes @zeng450026937 we have an other error related this #5475

Thanks

[arackaf]

@zeng450026937

Pending @damianpumar's fix, you might try

[damianpumar]

@zeng450026937

Pending @damianpumar's fix, you might try

Good morning @arackaf yes, I pushed my fix here https://github.com/sveltejs/svelte/pull/5536 if you want, I can add a test to verify this.

Many thanks!

[PaulMaly]

Using this broke the building process completely and silently, even in REPL: https://svelte.dev/repl/27483a5fc4064f4bb8f3584528d53655?version=3.29.0

Spent half of an hour to find out why the Rollup stopped building an app, no errors occurred and it's the most
bad moment.

[damianpumar]

Using this broke the building process completely and silently, even in REPL: https://svelte.dev/repl/27483a5fc4064f4bb8f3584528d53655?version=3.29.0

Spent half of an hour to find out why the Rollup stopped building an app, no errors occurred and it's the most
bad moment.

This issue was fixed by me 3 days ago here https://github.com/sveltejs/svelte/pull/5536 and it was added to 3.29.1 milestone

Thanks!