question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

$$slots with slot forwarding

See original GitHub issue

Describe the bug If you forward a slot (ex. <slot name="label" slot="label" />) the slot is always considered passed to the parent even if not passed to the child. This breaks any conditional logic based on passed slots within the parent.

To Reproduce Here is a REPL demonstrating the issue: https://svelte.dev/repl/d0cd92776d534349acf8e3e2deb074fa?version=3.35.0 (see console output and presence of red description <div>).

Expected behavior Referencing the REPL, I would expect $$slots.description to not be present as a passed slot in the parent Field component, just like $$slots.description within TextField.

Severity The only workaround is to duplicate code across components and not leverage composition with slot forward, which isn’t terrible nor optimal.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:14
  • Comments:7

github_iconTop GitHub Comments

2reactions
techniqcommented, Oct 6, 2021

One slight workaround for some use cases is to use :empty to apply display: none on the block (or empty:hidden class for tailwind). REPL

This doesn’t solve a lot of other uses cases, and also falls apart if you have any markup within it (basically more than anything but a simple slot). Even a {#if false}{/if} causes a single space to render which breaks :empty until Selectors Level 4 is implemented by browsers.

0reactions
techniqcommented, May 6, 2022

Conditional Slots RFC by @tanhauhau would be able to handle this by checking if the slot is declared

<Field>
   {#if $$slots.label}
	<slot name="label" slot="label" />
   {/if}
   {#if $$slots.description}
	<slot name="description" slot="description" />
   {/if}
</Field>
Read more comments on GitHub >

github_iconTop Results From Across the Web

$$slots with slot forwarding • REPL • Svelte
Interactive Svelte playground.
Read more >
Multi-slot forwarding in the MAN. Number in slots represent ...
... reuse of slots is possible in the DAVID Metro: a node receiving a packet leaves free the corresponding slot, which can be...
Read more >
Shadow DOM slots, composition
Shadow DOM supports <slot> elements, that are automatically filled by the content from light DOM. Named slots. Let's see how slots work on...
Read more >
Using templates and slots - Web Components | MDN
This article explains how you can use the <template> and <slot> elements to create a flexible template that can then be used to...
Read more >
EIF Slot Customization - IBM
Common slots are those that are included in all forwarded events, such as situation_name ; event slots are those specific to the situation....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found