withastro
`<table>` is not rendered correctly in .astro components with `is:raw`
What version of astro are you using?
2.0.2
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
pnpm
What operating system are you using?
Linux(WSL)
Describe the Bug
The following .astro component code produces wrong HTML rendering results.
---
const html = `<table is:raw><thead><tr><th>a</th><th align="left">b</th><th align="right">c</th><th align="center">d</th></tr></thead><tbody><tr><td>1</td><td align="left">2</td><td align="right">3</td><td align="center">4</td></tr></tbody></table>`;
---
<table is:raw><thead><tr><th>a</th><th align="left">b</th><th align="right">c</th><th align="center">d</th></tr></thead><tbody><tr><td>1</td><td align="left">2</td><td align="right">3</td><td align="center">4</td></tr></tbody></table>
<hr>
<Fragment set:html={html}>
The component is compiled into the following HTML, which is not desired.
abcd1234
<table></table>
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-wzww1o?file=src/pages/index.astro
Participation
- [ ] I am willing to submit a pull request for this issue.
Hi, I had a brief look into this. It looks like if you remove the is:raw from the table it works just fine.
E.g.
<table><thead><tr><th>a</th><th align="left">b</th><th align="right">c</th><th align="center">d</th></tr></thead><tbody><tr><td>1</td><td align="left">2</td><td align="right">3</td><td align="center">4</td></tr></tbody></table>
The docs on is:raw seem to suggest it's only really needed in special cases, because it treats everything inside as text. This might explain the weird behaviour on your end.
https://docs.astro.build/en/reference/directives-reference/#advanced-directives
I still think this behavior is a quirk. The doc of is:raw suggest that the content inside will be treated as plain text. Does that imply it will be forwarded to innerHTML if the outer element is a vanilla HTML element?