compiler Nested list components using JSX expressions throw error

What version of `astro` are you using?

2.6.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

What browser are you using?

Firefox

Describe the Bug

This isn't a vital bug (at least not this reproduction) because it misuses li elements.

If you nest a list of li elements in a JSX expression, surrounded by an li element, Astro throws an error.

---
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<ul>
			<li>
				{
					[''].map(() => (
						<li></li>
					))
				}
			</li>
		</ul>
	</body>
</html>

What's the expected result?

Correctly render the elements

Link to Minimal Reproducible Example

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

Participation

[ ] I am willing to submit a pull request for this issue.

Jun 22 '23 17:06 TheOtterlord

Ah yes, one of our fun compiler edge cases. Because li > li isn't valid, the compiler silently "corrects" the markup but ends up breaking the expression in the process. It's definitely worth rethinking how that works, but it's a huge task so I'm not sure when we'll be able to tackle it.

Temporary workaround if this output is ever needed for some reason... wrapping invalid markup in a <Fragment> or using set:html usually does the trick.

Jun 22 '23 18:06 natemoo-re

@natemoo-re, but is there any motivation to have li > li? Considering the HTML standard, it mentions how li can be used. In this case, an error is expected, and it would be strange if there weren't an error, don't you think?