DOM shim not accurately creating templates (`HTMLTemplateElement`)

[thescientist13]

Type of Change

• Bug

Summary

Implementation of document.createElement('template') in dom-shim.js is incorrect. Based on testing in Chrome, the operation of creating a new template should include the <template> tag as part of the content, and would be present say when appending to another element.

Details

So doing something like this shouldn't work as we have it now

const template = document.createElement('template');

template.innerHTML = `
  <footer>
    <p>
      <a href="https://projectevergreen.github.io">WCC &#9672 Project Evergreen</a>
    </p>
  </footer>
`;

class Footer extends HTMLElement {
  connectedCallback() {
    this.appendChild(template.content.cloneNode(true));
  }
}

export {
  Footer
};

customElements.define('wcc-footer', Footer);

As it will yield this HTML, which is wrong because the <template> tag should be included.

<wcc-footer>
  <footer>
    <p>
      <a href="https://projectevergreen.github.io/">WCC ◈ Project Evergreen</a>
    </p>
  </footer>
</wcc-footer>