withastro
Nested lists in wrong order when using slots
Astro Info
Astro v5.2.5
Node v22.14.0
System Windows (x64)
Package Manager pnpm
Output static
Adapter none
Integrations @astrojs/mdx
@astrojs/react
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
Using Astro components with slots results in lists items being generated outside of the slot
Menu.astro:
<menu><slot /></menu>
Nav.astro:
---
import Menu from "./Menu.astro";
---
<nav>
<menu>
<li>
<Menu>
<li>test</li>
</Menu>
</li>
</menu>
</nav>
HTML output:
<body>
<nav>
<menu>
<li><menu></menu></li>
<li>test</li>
</menu>
</nav>
</body>
What's the expected result?
List items go inside the slot correctly
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-jtgsx6ty
Participation
- [ ] I am willing to submit a pull request for this issue.
@mthierman I can confirm this.... good find!!
if the parents are eg <nav><div><div> then the nested menu is fine
it's also the same problem if we use <ul> instead of <menu> in the parent
if you change Menu.astro to the following, you can see that the fallback content is not getting replaced properly as it still shows up in the output
Menu.astro
<menu>
<slot><li>fallback content<li></slot>
</menu>
Seems to be a compiler bug.
If I look at the compiler output for:
---
import Menu from "./Menu.astro";
---
<nav>
<menu>
<li>
<Menu>
<li>test</li>
</Menu>
</li>
</menu>
</nav>
I see the generated render function already has things out of order:
return $$render`${$$maybeRenderHead($$result)}<nav>
<menu>
<li>
${$$renderComponent($$result,'Menu',Menu,{})}</li><li>test</li>
</menu>
</nav>`;
}, 'Card.astro', undefined);
