Skip to content

Element placed in slot called "undefined" #946

@ferencalmasi

Description

@ferencalmasi

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.

Metadata

Metadata

Assignees

Labels

- P3: minor bugAn edge case that only affects very specific usage (priority)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions