fix(template-compiler): fix static td/th/etc elements

packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/actual.html

@@ -0,0 +1,18 @@
+<template>
+  <table>
+    <thead>
+      <template for:each={rows} for:item="row">
+        <tr key={row.id}>
+          <th></th>
+        </tr>
+      </template>
+    </thead>
+    <tbody>
+      <template for:each={rows} for:item="row">
+        <tr key={row.id}>
+          <td></td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/expected.js

@@ -0,0 +1,52 @@
+import { registerTemplate } from "lwc";
+const stc0 = {
+  key: 0,
+};
+const stc1 = {
+  key: 1,
+};
+const stc2 = {
+  key: 3,
+};
+const stc3 = {
+  key: 4,
+};
+const stc4 = {
+  key: 6,
+};
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const { k: api_key, h: api_element, i: api_iterator } = $api;
+  return [
+    api_element("table", stc0, [
+      api_element(
+        "thead",
+        stc1,
+        api_iterator($cmp.rows, function (row) {
+          return api_element(
+            "tr",
+            {
+              key: api_key(2, row.id),
+            },
+            [api_element("th", stc2)]
+          );
+        })
+      ),
+      api_element(
+        "tbody",
+        stc3,
+        api_iterator($cmp.rows, function (row) {
+          return api_element(
+            "tr",
+            {
+              key: api_key(5, row.id),
+            },
+            [api_element("td", stc4)]
+          );
+        })
+      ),
+    ]),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];

packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/metadata.json

@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}

packages/@lwc/template-compiler/src/codegen/index.ts

@@ -9,6 +9,7 @@ import * as astring from 'astring';
 import { isBooleanAttribute, SVG_NAMESPACE, LWC_VERSION_COMMENT } from '@lwc/shared';
 import { generateCompilerError, TemplateErrors } from '@lwc/errors';
 
+import { isUnsafeTopLevelSerializableElement } from '../parser/tag';
 import {
     isComment,
     isText,
@@ -71,7 +72,12 @@ function transform(codeGen: CodeGen): t.Expression {
         const databag = elementDataBag(element, slotParentName);
         let res: t.Expression;
 
-        if (codeGen.staticNodes.has(element) && isElement(element)) {
+        if (
+            codeGen.staticNodes.has(element) &&
+            isElement(element) &&
+            // Tags like <th> and <td> are okay as static fragments, but only if they're not at the top level
+            !isUnsafeTopLevelSerializableElement(element)
+        ) {
             // do not process children of static nodes.
             return codeGen.genHoistedElement(element, slotParentName);
         }

packages/@lwc/template-compiler/src/parser/constants.ts

@@ -168,10 +168,42 @@ export const KNOWN_HTML_ELEMENTS = new Set(HTML_ELEMENTS.concat(HTML_VOID_ELEMEN
 export const HTML_TAG = {
     A: 'a',
     AREA: 'area',
+    BODY: 'body',
+    CAPTION: 'caption',
+    COL: 'col',
+    COLGROUP: 'colgroup',
+    HEAD: 'head',
+    HTML: 'html',
+    TBODY: 'tbody',
+    TD: 'td',
+    TFOOT: 'tfoot',
+    TH: 'th',
+    THEAD: 'thead',
+    TR: 'tr',
     USE: 'use',
 };
 export const ATTR_NAME = {
     HREF: 'href',
     XLINK_HREF: 'xlink:href',
 };
 export const TEMPLATE_DIRECTIVES = [/^key$/, /^lwc:*/, /^if:*/, /^for:*/, /^iterator:*/];
+
+// Tags that cannot be parsed at the top level of a fragment. Generated from
+// https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+// using the test:
+// document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+// TODO [#2890]: use <template> instead, drop IE11 support for static optimization
+export const TAGS_THAT_CANNOT_BE_PARSED_AS_TOP_LEVEL = new Set([
+    HTML_TAG.BODY,
+    HTML_TAG.CAPTION,
+    HTML_TAG.COL,
+    HTML_TAG.COLGROUP,
+    HTML_TAG.HEAD,
+    HTML_TAG.HTML,
+    HTML_TAG.TBODY,
+    HTML_TAG.TD,
+    HTML_TAG.TFOOT,
+    HTML_TAG.TH,
+    HTML_TAG.THEAD,
+    HTML_TAG.TR,
+]);

packages/@lwc/template-compiler/src/parser/tag.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { BaseElement } from '../shared/types';
+import { TAGS_THAT_CANNOT_BE_PARSED_AS_TOP_LEVEL } from './constants';
+
+export function isUnsafeTopLevelSerializableElement(element: BaseElement) {
+    return TAGS_THAT_CANNOT_BE_PARSED_AS_TOP_LEVEL.has(element.name);
+}

packages/integration-karma/test/static-content/index.spec.js

@@ -1,7 +1,8 @@
 import { createElement, setFeatureFlagForTest } from 'lwc';
-import Container from './x/container/container';
-import MultipleStyles from './x/multipleStyles/multipleStyles';
-import SvgNs from './x/svgNs/svgNs';
+import Container from 'x/container';
+import MultipleStyles from 'x/multipleStyles';
+import SvgNs from 'x/svgNs';
+import Table from 'x/table';
 
 // In compat mode, the component will always render in synthetic mode with the scope attribute
 if (!process.env.NATIVE_SHADOW && !process.env.COMPAT) {
@@ -91,3 +92,19 @@ describe('svg and static content', () => {
         });
     });
 });
+
+describe('tables and static content', () => {
+    it('should work with a static <td>', () => {
+        const elm = createElement('x-table', { is: Table });
+        document.body.appendChild(elm);
+
+        expect(elm.shadowRoot.querySelectorAll('td').length).toEqual(0);
+
+        elm.addRow();
+
+        return Promise.resolve().then(() => {
+            expect(elm.shadowRoot.querySelectorAll('td').length).toEqual(1);
+            expect(elm.shadowRoot.querySelector('td').textContent).toEqual('');
+        });
+    });
+});

packages/integration-karma/test/static-content/x/table/table.html

@@ -0,0 +1,11 @@
+<template>
+  <table>
+    <tbody>
+      <template for:each={rows} for:item="row">
+        <tr key={row}>
+          <td></td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>

packages/integration-karma/test/static-content/x/table/table.js

@@ -0,0 +1,13 @@
+import { LightningElement, api, track } from 'lwc';
+
+let count = 0;
+
+export default class extends LightningElement {
+    @track
+    rows = [];
+
+    @api
+    addRow() {
+        this.rows.push(++count);
+    }
+}