Table elements in ${repeat()} in FireFox

[Westbrook]

Taking a look at https://glitch.com/edit/#!/forest-editorial?path=index.html:56:22 When you run the preview, in Chrome/Safari the repeats build a table with <tr/> and <td/> elements as expected. However in Firefox, while you get the content printed, the table elements are missing.

My demo is built with lit-element, so if you feel for some reason this is actually a lit-element issue, just let me know and I can move this over to that repo. Thanks!

Chrome:

Firefox:

[bgotink]

I've looked into this, apparently Firefox only allows table subelements as root element in a template that's being parsed by the browser and not when the content of the template is set using innerHTML:

const content = `
  <tr>
    <td class=\"record\"></td>
    <td></td>
  </tr>
`;

const tpl = document.createElement('template');
tpl.innerHTML = content;

const container = document.createElement('div');
container.innerHTML = `<template>${content}</template>`;
const tpl2 = container.firstElementChild;

console.log('Created template', tpl, ...tpl.content.childNodes);
console.log('Parsed template', tpl2, ...tpl2.content.childNodes);

Output in Firefox:

Output in Chrome:

[justinfagnani]

Interesting. Thanks for investigating @bgotink

Looks like we could update the getTemplate() implementation in TemplateResult here: https://github.com/Polymer/lit-html/blob/master/src/lit-html.ts#L75 to wrap the contents in a <template> tag:

  getTemplateElement(): HTMLTemplateElement {
    const template = document.createElement('template');
    template.innerHTML = `<template>${this.getHTML()}</template>`;
    return template.content.firstElementChild.content;
  }
}

Then we should add a test that fails when Firefox fixes this so we can remove the hack :)

[bgotink]

I did some further investigation, turns out I was testing in firefox on a page where ShadyDOM is active. Without ShadyDOM the output is as expected:

Visit https://plnkr.co/edit/xALtastcvBI4VMeKv6cX?p=preview in Firefox and you'll see it's broken. Comment the script tag that loads the webcomponent shims and it'll work.

EDIT: @justinfagnani I just noticed you already logged this in the ShadyDOM repo: webcomponents/shadydom#208

[bgotink]

This issue is now solved when using the latest webcomponents shim! 🎉

• The plunker above works in firefox: https://plnkr.co/edit/xALtastcvBI4VMeKv6cX?p=preview
• I've updated the glitch in the OP to the latest version and it works in firefox as well: https://glitch.com/edit/#!/carnation-hoof?path=package.json:14:17

[justinfagnani]

@bgotink thanks for confirming it's fixed!