Static fragments of <td></td> result in runtime error

[nolanlawson]

Description

I noticed that the static optimization (#2781) broke the js-framework-benchmark. It throws an error when trying to append elements.

The problem is that the compiled template ends up with this code:

const $fragment2 = parseFragment`<td class="col-md-6${0}"${2}></td>`;

And eventually it tries to parse this html into a fragment using this function:

lwc/packages/@lwc/engine-dom/src/renderer.ts

Lines 107 to 109 in c828bfe

	function createFragment(html: string): Node | null {
	return document.createRange().createContextualFragment(html).firstChild;
	}

But since the <td> is standalone, this function returns null:

Minimal repro:

<template>
    <button onclick={add}>Create row</button>
    <table>
        <tbody>
            <template for:each={rows} for:item="row">
                <tr key={row.id}>
                    <td></td>
                </tr>
            </template>
        </tbody>
    </table>
</template>

import { LightningElement, track } from 'lwc';

export default class extends LightningElement {
    @track rows = [];

    add() {
        this.rows.push({ id: 1 });
    }
}

[nolanlawson]

WI: W-11308172

[caridy]

Yeah, more rules to limit what can be statically inserted. Luckily, that's well specified, let's just add more rules.

[nolanlawson]

Yeah we could potentially do some kind of workaround for static <td>s (e.g. wrapping them in another element before parsing), but I wonder if it's worth it. It might actually be a perf regression due to creating an extra element just to throw it away. Adding a rule is simpler.