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
Astro Info
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:
When setting a slot to
undefined
, it also creates a slot in Astro called "undefined":Logging
Astro.slots
˛ to the console gives us the following:What's the expected result?
slot
prop is falsy (undefined
,null
, etc) the element should not be placed in a slotLink to Minimal Reproducible Example
https://stackblitz.com/edit/withastro-astro-zfaobp?file=src%2Fpages%2Findex.astro
Participation