Conditional branching within table <td> elements causes DOM structure corruption

[k-wakamatsu-tms]

Astro Info

Astro                    v5.14.1
Vite                     v6.3.6
Node                     v20.19.1
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

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

No response

Describe the Bug

Conditional branching within table elements causes DOM structure corruption. Visually, the UI elements appearing after

are rendered above the table.

                  <tr>
                    <th>hoge</th>
                    <td>
                      {
                        formData.hoge === 'other' &&
                          formData.hoge_other && (
                            <> ({formData.hoge_other })</>
                          )
                      }
                    </td>
                  </tr>

What's the expected result?

displaying exactly as the DOM structure is written

Link to Minimal Reproducible Example

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

Participation

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

[ArmandPhilippot]

I'm not a compiler expert but this sounds related to:

• <td> in <a href={variable}>{variable}</a> error #958
• Rendering issue: variable in th or caption inside a Table component wrapped with another element #1015

I can see the unexpected output in the repro, but this doesn't seem related to conditional rendering. Using:

-{bar==="bar" && <>{hoge}</>}
+{bar==="bar" && "test"}

The table is correctly rendered. Not sure what the issue is but it seems the compiler sometimes struggles while using variables inside a table.

So, I'll move this issue to the compiler repository but I'm not sure if this is a duplicate or just another edge case!

I don't know your use case but it seems using the following example gives the expected result:

{bar==="bar" && <Fragment set:html={hoge} />}

So maybe you can adapt your code in the meantime.