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

Astro component with table and slot wrongly parsed #12300

Closed
1 task
mb21 opened this issue Oct 24, 2024 · 3 comments
Closed
1 task

Astro component with table and slot wrongly parsed #12300

mb21 opened this issue Oct 24, 2024 · 3 comments
Labels
needs triage Issue needs to be triaged

Comments

@mb21
Copy link

mb21 commented Oct 24, 2024 •
edited
Loading

Astro Info

Astro                    v4.16.7
Node                     v20.12.2
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/solid-js

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The following page:

---
import MailLayout from '../components/MailLayout.astro'

const name = 'foo'
---

<MailLayout>

  <tr>
    <td>
      <a href="/foo" target="_blank">
        {name}
      </a>
    </td>
  </tr>

  <div slot="footer">
    Footer
  </div>
</MailLayout>

that uses components/MailLayout.astro:

---
---

<main>
  <slot />
</main>

<footer>
  <slot name="footer" />
</footer>

Is converted to the following HTML, which is obviously wrong:

<body>
    <main>
        <a href="/foo" target="_blank"> foo </a>
        <a href="/foo" target="_blank">
            <div slot="footer">
                Footer
            </div>
        </a>
    </main>
    <footer></footer>
</body>

What's the expected result?

Correct HTML with non-empty <footer> and not duplicated link.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-h3l48b?file=src%2Fpages%2Findex.astro

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 Oct 24, 2024
@ArmandPhilippot
Copy link
Member

ArmandPhilippot commented Oct 24, 2024 •
edited
Loading

Hi @mb21, your reproduction is both missing the footer part, and a table element.

Once wrapped by <table>, the table is correctly rendered. But indeed, the <footer> is empty and the <a> duplicated.

However, if you use text (e.g. Foo) instead of {name}, there no longer seems to be a rendering problem!

If you make the same observation, I think your problem is similar to the one I (perhaps poorly) described here: withastro/compiler#1015

Do not hesitate to explain your case in the open issue. Your case seems a little different than mine, but I feel like the problem is the same. And if you have a better title, I'd be happy to update it! (maybe something like: Rendering issue when using a variable inside a <table>?)

@mb21
Copy link
Author

mb21 commented Oct 28, 2024 •
edited
Loading

Thanks! Yes, seems to be about the same issue. I would close as a duplicate, but yours has been "needs triage" for four months?! Maybe time for me to switch more components over to JSX 🙄

@bluwy
Copy link
Member

bluwy commented Oct 28, 2024

The compiler needs a bit more love, currently we don't have the bandwidth to fix some of its issues, but will eventually get to it soon.

I'll close this for now in favour of the linked compiler issue.

@bluwy bluwy closed this as not planned Won't fix, can't repro, duplicate, stale Oct 28, 2024
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
4 participants
@mb21 @bluwy @ArmandPhilippot and others