Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nested lists in wrong order when using slots #13231

Open
1 task
mthierman opened this issue Feb 12, 2025 · 1 comment
Open
1 task

Nested lists in wrong order when using slots #13231

mthierman opened this issue Feb 12, 2025 · 1 comment
Labels
needs triage Issue needs to be triaged

Comments

@mthierman
Copy link

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Feb 12, 2025
@codemonkeynorth
Copy link

codemonkeynorth commented Feb 19, 2025 •
edited
Loading

@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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage Issue needs to be triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@codemonkeynorth @mthierman