Unexpected formatting for components inside <tbody>

[FloEdelmann]

Using the playground (with default settings):

Input	Output
<tbody> <tr><td>This is fine</td></tr> <component-that-gets-rendered-as-tr /> </tbody>	<tbody> <tr> <td> This is fine </td> </tr> </tbody> <component-that-gets-rendered-as-tr> </component-that-gets-rendered-as-tr>
<table> <tbody> <tr><td>This is fine</td></tr> <component-that-gets-rendered-as-tr /> </tbody> </table>	<component-that-gets-rendered-as-tr> </component-that-gets-rendered-as-tr> <table> <tbody> <tr> <td> This is fine </td> </tr> </tbody> </table>

It is weird that <component-that-gets-rendered-as-tr> is not kept at its position inside <tbody>, and it's even weirder that it gets moved below <tbody> but above <table>.

Since this component is rendered as <tr> at runtime (but might be stubbed in the test), is there any possibility to keep its position inside <tbody>?

[TheJaredWilcurt]

This seems to be related to using parse5 for the formatter (see: AST Explorer). Since it wants to be HTML spec compliant. There are weird limitations in the spec related to table/tbody tags. For example, you cannot have anything other than <tr> inside a <tbody>. If you put a <tbody><td></td></tbody> it will correct to <tbody><tr><td></td></tr></tbody>. And if there is anything else in the <tbody> it will be moved outside of it. Similarly <table> will create a <tbody> if one does not exist, and moves non-table tags outside.

If you changed your examples to divs, it actually works the way we'd want.

Input	Output
<div class="tbody"> <div class="tr"> <span class="td"> Text </span> </div> <fake-tr /> </div>	<div class="tbody"> <div class="tr"> <span class="td"> Text </span> </div> <fake-tr></fake-tr> </div>

We pass the markup into parse5 and it gives us an AST. But the AST is already out-of-order (fake-tr has been moved out of the original DOM hierarchy).

I'm not sure what to do here.

1. Find some way to make parse5 not HTML spec compliant (not sure if possible, haven't researched it)
2. Use the original position data to move all AST objects into a more accurate nested structure. This would be complex, but could be done in a separate function prior to the formatting function.
3. Use an alternative HTML parser that is less strict. Would require re-writing the diffable formatter.

[TheJaredWilcurt]

Related: inikulin/parse5#1354