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

Svelte 4: forwarded slots ignore the fallback parent slot #9452

Closed
opensas opened this issue Nov 14, 2023 · 2 comments
Closed

Svelte 4: forwarded slots ignore the fallback parent slot #9452

opensas opened this issue Nov 14, 2023 · 2 comments

Comments

@opensas
Copy link
Contributor

opensas commented Nov 14, 2023

Describe the bug

I define a Card.svelte component with a message slot, which has a default fallback content.

I can render the Card component with the fallback slot and also override it correctly ==> OK

I then define a ForwardCard.svelte which calls Card.svelte, customizing it's titlle, and passes on the message slot.

ForwardCard slot can be overriden, but if the slot is not specified IT WON'T fallback to use the default of the parent component, Card.svelte.

svelte repl reproducing the issue: link

<!-- Card.svelte -->
<script>
	export let message = ''
</script>

<div>
	<slot name="title">
		<div>This is a Card.svelte</div>
	</slot>

	<slot name="message" {message}>
		<div>fallback slot: {message}</div>
	</slot>
	
	<hr />
</div>
<!-- ForwardCard.svelte -->
<script>
	import Card from './Card.svelte'

	export let message = 'custom message'
</script>

<Card {message}>
	<div slot="title">This is a ForwardCard.svelte</div>
	<!-- if the slot is not specified, it should display the Card.svelte fallback slot -->
	<slot name="message" slot="message" {message}/>
</Card>
<!-- App.svelte -->
<!-- see question at SO: https://stackoverflow.com/q/77476736/47633 -->
<script>
	import Card from './Card.svelte'
	import ForwardCard from './ForwardCard.svelte'
</script>

<Card message='Card with fallback slot!' /> <!-- slot with fallback content: OK! -->

<Card message='Card with custom slot'> <!-- slot with custom content: OK! -->
	<div slot="message" let:message>custom slot: {message}</div>
</Card>

<ForwardCard message='ForwardCard with fallback slot!' /> <!-- forwarded slot with fallback content: WRONG!!! -->

<div>ERROR: MISSING "fallback slot: ForwardCard with default fallback!"</div>

<hr />

<ForwardCard message='ForwardCard with custom slot' > <!-- forwarded slot with custom content: OK! -->
	<div slot="message" let:message>custom slot: {message}</div>
</ForwardCard>

output:

This is a Card.svelte
fallback slot: Card with fallback slot!

This is a Card.svelte
custom slot: Card with custom slot

This is a ForwardCard.svelte
ERROR: MISSING "fallback slot: ForwardCard with default fallback!"

This is a ForwardCard.svelte
custom slot: ForwardCard with custom slot

image

Note: I also tried with Svelte 5 snippets and it works ok (great!!!)

svelte 5 repl: link


note: it seems to me like this line <slot name="message" slot="message" {message}/> is sending an empty slot, instead of no slot at all, and that's why the fallback is not being called. perhaps it's not a bug, but it's just that I couldn't find a way to forward no slot.

In other words, When ForwardCard doesn't receive any message slot, it shouldn't send any message slot to Card, instead of sending an empty slot, like I suspect it's doing right now.

Reproduction

svelte 4 repl with error

svelte 5 repl working OK

Logs

No response

System Info

repl online version version=4.2.3

Severity

annoyance

@opensas
Copy link
Contributor Author

opensas commented Nov 14, 2023

additional info: related question at stackoverflow

@dummdidumm
Copy link
Member

There are many such edge cases and small gotchas with the current slot system. Closing because snippets replace slots with a more predictable and flexible solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants