Issue with slots containing multiple items / conditions #950
Description
Astro Info
Astro v4.2.3
Node v20.10.0
System macOS (arm64)
Package Manager pnpm
Output server
Adapter none
Integrations astro-dynamic-import
adds-to-head
@astrojs/vue
astro-purgecss
astro-compress
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
as of v4.2.2, slots are not longer working correctly. When a slot has a loops, only the last item is being rendered. From what I can tell, its seems to be something to do with wrapping a slot in a condition (see reproduction)
This does not work (only last item in items is rendered)
---
import Layout from '../layouts/Layout.astro';
import Test from '../components/Test.vue';
const items = [1,2,3,4,5];
const test = false;
---
<Layout title="Welcome to Astro.">
Outside
<Test>
{test && (
<p slot={test ? 'test' : undefined}>
Test name slot
</p>
)}
{items.map(item => (
<p>Item {item}</p>
))}
</Test>
</Layout>
This does work (all items rendered)
---
import Layout from '../layouts/Layout.astro';
import Test from '../components/Test.vue';
const items = [1,2,3,4,5];
const test = false;
---
<Layout title="Welcome to Astro.">
Outside
<Test>
<p slot={test ? 'test' : undefined}>
Test name slot
</p>
{items.map(item => (
<p>Item {item}</p>
))}
</Test>
</Layout>
What's the expected result?
all items to be rendered in correct slots
Link to Minimal Reproducible Example
Participation
- I am willing to submit a pull request for this issue.