Improve documentation on fallback content for slots

sasoria commented 2 weeks ago

📚 Subject area/topic

Fallback Content for Slots

📋 Suggested page

https://docs.astro.build/en/basics/astro-components/#fallback-content-for-slots

📋 General description or bullet points (if proposing new content)

There is a case where the default fallback content for slots is not displayed. This has been discussed on this issue in the withastro/astro repo.

So given component A and B below, the default fallback content is not shown when <slot name="s" slot="s" /> is present and empty. That is, when the slot is empty in component A, the fallback content is not shown.

Component B

<slot name="s">
  <div>Default content</div>
</slot>

Component A

<B>
  <slot name="s" slot="s" />
</B>

As Mathew wrote in the issue mentioned earlier, "Default content is rendered when a slot is not provided. Not when it is empty." This should be documented in the section about Fallback Content for Slots.

🖥️ Reproduction of code samples in StackBlitz

Link to the fallback behaviour on Stackblitz

jdtjenkins commented 1 week ago

@sasoria Hey! Just looking through the stackblitz repro you posted but it looks like it actually does work and the B component correctly shows the fallback content.

And I've forked and added a console log which shows the slot is present, but (at least for me) it's still showing the fallback content.

https://stackblitz.com/edit/github-mvb5lj-ruh4c2?file=src%2Fpages%2Findex.astro,src%2Fincludes%2FB.astro,src%2Fincludes%2FA.astro

sasoria commented 1 week ago

Thanks for checking out the example. It looks like you have a typo in component B inside your fork. The closing tag of the div is missing a >.

<div>B start</div 
<slot name="s">

I'm not sure why, but this makes the default content show up, as you've noticed. If you close the div the default content does not show up, at least on my end. The same is true for the initial example I've linked to.

jdtjenkins commented 1 week ago

Ah! I don't know how I missed that! But yes, now when I try it with the closing tag then yes the default content disappears! Thank you for taking a look!

withastro / docs