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 I've noticed that in IE 11 this polyfill fails to work with templates that include <tr> and <td> tags

My sample on jsfiddle

The problem is that when we try to get childNodes from template tag node

elPlate.childNodes

it returns everything but <tr> and <td> children as if there were no such tags inside <template>.

Am I missing something? Is there any workarounds for this issue?

P.S I was not able to add a comment to source issue due to lack of reputation. Sorry for that.

Answer 1

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/

Answer 2

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.