Document Astro.slots.has() behavior with conditionals

[msikma]

This is something that really threw me for a loop. I'm a new user, and Astro largely works exactly how you'd expect it to work, and you largely don't have to even read the documentation too closely and "just use" it, but this one thing was very confusing to me and led me to search if there were any bug reports because I couldn't imagine the behavior was intended even after reading the documentation.

The issue is that if you use Astro.slots.has() to conditionally wrap something:

// TextPost.astro
{Astro.slots.has('meta') && (
  <div class="meta">
    <slot name="meta" />
  </div>
)}

And then you include the template like this:

// SomethingIncludingTextPost.astro
<TextPost>
  {showMeta && (
    <Fragment slot="meta">
      <p class="date">2025-01-01</p>
    </Fragment>
  )}
</TextPost>

Even if showMeta is false, Astro.slots.has('meta') will still return true, even though no "meta" slot is passed along. You will always get a <div class="meta"></div> wrapper even if there's nothing in it.

Now, I understand that this is how it's supposed to work, it's not a bug, and there's a reason for why it works the way it does. But I don't think it's obvious. It may be that I'm a bit biased because the syntax is JSX like and if you're coming from JSX you'd expect something to just not exist if it's in a conditional like that. But the slot functionality is based on static analysis, and that's why it returns true. So: understandable, but I think it can easily run counter to people's assumptions.

My suggestion is to just document that Astro.slots.has() is does not work with conditionals.

On a side note, someone offered this workaround, but the workaround doesn't seem to work for me at all: withastro/astro#3884 (comment) I can't quite figure out why this is even supposed to work, to be honest. Maybe it worked in the past and no longer does? As far as I can tell there is no workaround aside from rendering the content and checking if it's empty.

This has been reported a number of times (probably more, I didn't go through all results):

• Astro.slots.has() returns true when slot exists inside a falsy conditional block. astro#10024
• 🐛 BUG: Astro.slots.has is true despite condition being false astro#3884
• Astro.slots.has("default") true when default <slot> empty astro#9654
• Astro.slots.has() wrongly returns true astro#9278

[ArmandPhilippot]

The workaround should still work, but I know I had unexpected behaviour with &&. You can try with a ternary instead:

<Component>
  {condition && <p slot={condition ? 'named-slot' : ''}>Slot content</p>}
</Component>

But, I agree using Astro.slots.has() with named slots is not obvious and confuses a lot of people. So, we should probably add something about this behaviour in https://docs.astro.build/en/reference/astro-syntax/#astroslotshas

[msikma]

Thank you for your reply!

To be honest, I'm now confused about the workaround not working for me. I thought I had pretty conclusively tested and seen that it doesn't work (as described in the original comment I linked to, using &&). Now I see the ternary way does seem to work, but actually the && method also seems to work? Now I'm not sure if I screwed up or if there's some property of the static analysis that makes the behavior unpredictable.

In my case, my use case was actually very simple, so I ended up just hiding it in CSS with a :empty selector, which is also an option as long as your slot is placed somewhere where there's no whitespace.