No slot rendered within a condition

[GELight]

Describe the bug

If no named footer slot is initially rendered anywhere in the template, no further footer slots are rendered in other conditions.

Reproduction

I created a related repository to show the behaviour:
https://github.com/GELight/svelte-5-test/blob/main/projects/test/src/components/Payment/Payment.svelte

If the footer slot in line 33 is rendered, all other slots in other conditions are rendered correctly. Is not slot rendered anywere on initial then never any slot will rendered later.

I only found this case with a named slot but I not tested this behaviour with the default slot. I think technically it should be the same behaviour, right?

Logs

No log or error available.

Only the slot will not rendered.

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 12.86 GB / 30.48 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.7.0 - ~/.nvm/versions/node/v22.7.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.7.0/bin/npm
  Browsers:
    Brave Browser: 131.1.73.89
    Chrome: 131.0.6778.69
  npmPackages:
    svelte: 5.2.2 => 5.2.2

Severity

annoyance

[paoloricciuti]

This way simpler reproduction seems to work fine

https://www.sveltelab.dev/cg9i9ut6xhsmunc

Can you please provide a simpler non working reproduction?

[GELight]

Hi @paoloricciuti,

Is adapted your prepared testproject.
https://www.sveltelab.dev/cg9i9ut6xhsmunc

Here you can see the problem again.
I added only a modal component where I have my slot. This component I use in the my-element component.

Best regards,
Mario

[paoloricciuti]

Hi @paoloricciuti,

Is adapted your prepared testproject. https://www.sveltelab.dev/cg9i9ut6xhsmunc

Here you can see the problem again. I added only a modal component where I have my slot. This component I use in the my-element component.

Best regards, Mario

i think you posted the wrong link because this is my repl without any modification

[GELight]

Oh I am sorry. I forgot to login before.
Here is my example with the problem.
https://www.sveltelab.dev/3k3mflba4z9zw0t

Please have a look into the file MyElement.svelte.

Mario

[paoloricciuti]

Btw this wasn't working in svelte 4 wither

https://www.sveltelab.dev/kyafcijomjcq96u

If i remember correctly is just a limitation

[brunnerh]

Yes, you cannot nest slots in condition or the like.
Everything will become content of the default slot (or children prop in Svelte 5).

The conditions generally have to be inside the slots.

[brunnerh]

Relevant comment on an RFC regarding this: sveltejs/rfcs#64 (comment)

The idea with snippets is probably to define them outside and then pass them based on the condition, e.g.

{#snippet footer()} ... {/snippet}
<Component footer={showFooter ? footer : undefined} />

[GELight]

I must honestly admit that I don't understand what snippets have to do with slots.

Slots are the standard HTML slots and are essential in CustomElements for the ability to render content from the outside. For me, snippets are just a new way of structuring and outsourcing template parts.

I have already refactored my component so that I don't use my slot multiple times and only render its content in the corresponding conditions.

I think we can close this issue.
For me its ok to know that this behaviour is not a bug.

Best regards,
Mario

[piktaun]

Hi Mario,To address the issue of the `footer` slot not rendering, you can follow these steps:1. Verify that the slot is declared in the component using:   <slot name="footer"></slot>2. Add default content for the slot to ensure it’s always rendered:   <slot name="footer">Default footer content</slot>3. If rendering depends on conditions, use dynamic logic:   {#if condition}     <slot name="footer"></slot>   {/if}4. Ensure the parent component passes content to the slot:   <Payment>     <div slot="footer">My custom footer</div>   </Payment>5. Make sure any reactive variables affecting the slot update properly:   <script>     let showFooter = false;   </script>   {#if showFooter}     <slot name="footer"></slot>   {/if}6. Update Svelte and related dependencies:   npm update svelteIf none of these solve the issue, check DevTools to ensure the slot exists in the DOM and is not hidden by CSS.Best regards,Vladislav Suvorov17 нояб. 2024 г., в 00:27, Mario Linz ***@***.***> написал(а): Describe the bug If no named footer slot is initially rendered anywhere in the template, no further footer slots are rendered in other conditions. Reproduction I created a related repository to show the behaviour: https://github.com/GELight/svelte-5-test/blob/main/projects/test/src/components/Payment/Payment.svelte If the footer slot in line 33 is rendered, all other slots in other conditions are rendered correctly. Is not slot rendered anywere on initial then never any slot will rendered later. I only found this case with a named slot but I not tested this behaviour with the default slot. I think technically it should be the same behaviour, right? Logs No log or error available. Only the slot will not rendered. System Info System: OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm) CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor Memory: 12.86 GB / 30.48 GB Container: Yes Shell: 5.2.15 - /bin/bash Binaries: Node: 22.7.0 - ~/.nvm/versions/node/v22.7.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v22.7.0/bin/npm Browsers: Brave Browser: 131.1.73.89 Chrome: 131.0.6778.69 npmPackages: svelte: 5.2.2 => 5.2.2 Severity annoyance —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>