Template tag polyfill for IE 11 - not working with table tr and td

Question

I work with polyfill js that allows to process tags for browsers that does not support it.

Source code of polyfill on jsfiddle

Source question

But

Answer 1

You can work your way around it if you really want to work with <tr> in templates in IE11.

What you do is, instead of putting the <tr> directly in the templates, you put in an entire table like so

<template>
   <table>
      <tr>
         //foo bar
      </tr>
   </table>
</template>

This causes IE11 to no longer "correct" your HTML and return it as is. Once you cloned the HTML from the template, you can then extract the <tr> correctly out of the table and use it wherever it's needed.

Answer 2

This is happening because <tr> must be inside a <table> in order to be valid HTML. In your <template>, you have specified a loose <tr> that doesn't have a <table> parent. IE sees this as an error and removes it from the DOM. Hence, your template's documentFragment does not contain the <tr> and <td>.

The unfortunate fact is: IE is simply not ready for HTML5 template tags. It'd probably take a loooong while for Microsoft to implement it, and for the existing IE browser versions become truly obsolete. Only then can we reliably start using HTML5 template tags.

The workaround is: do not use <template>; explore template solutions using <script type="template"> instead. I believe they should work well. Some popular ones:

• https://mustache.github.io/
• http://handlebarsjs.com/