Element placed in slot called "undefined"

ferencalmasi commented 9 months ago

Astro Info

Astro                    v3.1.4
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Rendering elements inside a ternary with a slot renders the element in the slot, regardless of the condition:

// The second div will be rendered inside the "slotted" slot.
{false
  ? <div slot="slotted">Inside slot with red background</div>
  : <div>Outside slot without background</div>
}

When setting a slot to undefined, it also creates a slot in Astro called "undefined":

<div slot={false ? 'named-slot' : undefined}>
  Added to slot named "undefined"
</div>

Logging Astro.slots˛ to the console gives us the following:

Slots { slotted: [Getter], undefined: [Getter] }

What's the expected result?

The condition should be taken into consideration, and the element should be placed outside of the slot
If the value of the slot prop is falsy (undefined, null, etc) the element should not be placed in a slot

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-zfaobp?file=src%2Fpages%2Findex.astro

Participation

[ ] I am willing to submit a pull request for this issue.

natemoo-re commented 9 months ago

I’m thinking this is a case we forgot to account for in the compiler! Would be great to fix.

MoustaphaDev commented 5 months ago

The "undefined" slot issue is still present, so I'll reopen this

withastro / compiler