Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slot forwarding doesn't work as it were #8765

Open
kkarpeev opened this issue Jun 20, 2023 · 9 comments
Open

Slot forwarding doesn't work as it were #8765

kkarpeev opened this issue Jun 20, 2023 · 9 comments
Labels
awaiting submitter needs a reproduction, or clarification

Comments

@kkarpeev
Copy link

kkarpeev commented Jun 20, 2023

Describe the bug

Slot forwarding doesn't work as it were in 3.28. When middle component merely forwards named (or even default) slot, deeper component thinks that this slot is occupied. But it's not.

Reproduction

Correct behavior
Broken in 3.29

Logs

No response

System Info

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 3.72 GB / 15.36 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.20.0 - /usr/bin/node
    Yarn: 3.5.0 - /usr/bin/yarn
    npm: 8.19.4 - /usr/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Chromium: 114.0.5735.106
    Firefox: 113.0.2
  npmPackages:
    svelte: 3.53.1 => 3.53.1 
    webpack: 5.76.2 => 5.76.2

Severity

blocking an upgrade

@dummdidumm
Copy link
Member

I'm honestly not sure what the more correct behavior is - arguably that slot is taken, by the component passing things through, so you could make the argument that the one passing through now should take care of the fallback.

@dummdidumm dummdidumm added the awaiting submitter needs a reproduction, or clarification label Jun 20, 2023
@kkarpeev
Copy link
Author

kkarpeev commented Jun 20, 2023

@dummdidumm It is slot forwarding (not a nesting) that worked in specific way from the start until .29 in the same Svelte 3. Breaking changes in slot behavior are clearly not correct. Not to mention it breaks composition.

@kkarpeev

This comment was marked as duplicate.

@hjalmar
Copy link

hjalmar commented Jun 22, 2023

I just tried it using a fragment instead and that seems to work so it seems to be an inconsistent behavior at least?

@kkarpeev Maybe this works as a workaround for you? https://svelte.dev/repl/6c5c247ba9eb4cd8941d72cc57376a35?version=3.59.1

@Cybolic
Copy link

Cybolic commented Jun 23, 2023

@hjalmar The way I see it, your example does one forward (using the slot) and one assignment (using the svelte:fragment).

As I understand the issue, it's specifically that forwarding currently breaks any if blocks that use $$slots as well as any fallback slot contents, as demonstrated here: https://svelte.dev/repl/e07f09d9fd9d4fde8dd32a42bf4cd110?version=3.59.1

The second use of Component1 in this example doesn't actually use any of the slots, but the default slot content still isn't shown and the if test shows that $$slots property, incorrectly, is true.

#2079 may also be relevant.

@tanhauhau
Copy link
Member

well, in 3.28 it didnt work completely as you think too, as shown in:

https://svelte.dev/repl/2cdf3c12fda14ff980bcc8426179dd4f?version=3.28.0

you would not be able to pass content from App all the way into Component2 through slot forwarding.

the problem that you are pointing out is that Component2 has no idea if there's no actual content passed from a slot content from Component1, so i think one of the solutions for this is to have a conditional slot content:

<Component2>
  {#if $$slots['1']}
    <slot name="1" slot="2" />
  {/if}
</Component2>

though the conditional slot is currently undecided as the team is still settling down what would be for svelte 5

#8304

@kkarpeev
Copy link
Author

kkarpeev commented Nov 27, 2023

well, in 3.28 it didnt work completely as you think too, as shown in:

https://svelte.dev/repl/2cdf3c12fda14ff980bcc8426179dd4f?version=3.28.0

you would not be able to pass content from App all the way into Component2 through slot forwarding.

the problem that you are pointing out is that Component2 has no idea if there's no actual content passed from a slot content from Component1, so i think one of the solutions for this is to have a conditional slot content:

<Component2>
  {#if $$slots['1']}
    <slot name="1" slot="2" />
  {/if}
</Component2>

though the conditional slot is currently undecided as the team is still settling down what would be for svelte 5

#8304

No, this doesn't work for a default slot. It just ignores {#if} around <slot/>.
proof

upd: and what's undecided about svelte 3 (I'm using 3, not 5)? It's it your docs

@kkarpeev
Copy link
Author

kkarpeev commented Nov 27, 2023

I just tried it using a fragment instead and that seems to work so it seems to be an inconsistent behavior at least?

@kkarpeev Maybe this works as a workaround for you? https://svelte.dev/repl/6c5c247ba9eb4cd8941d72cc57376a35?version=3.59.1

Nope, it's not a workaround for a default slot either.

@kkarpeev
Copy link
Author

Can you, please, make this work in any way, please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting submitter needs a reproduction, or clarification
Projects
None yet
Development

No branches or pull requests

5 participants