$$slots with slot forwarding
See original GitHub issueDescribe 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:
- Created 3 years ago
- Reactions:14
- Comments:7
One slight workaround for some use cases is to use :empty to apply
display: none
on the block (orempty:hidden
class for tailwind). REPLThis 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.Conditional Slots RFC by @tanhauhau would be able to handle this by checking if the slot is declared