Polyfill template tag for IE 11 - doesn't work with tr and td table
I am working with polyfill js which allows to handle tags for browsers that don't support it.
Source code for polyfill on jsfiddle
Source question
But I noticed that in IE 11 this polyfill doesn't work with templates that include tags <tr>
and<td>
My sample at jsfiddle
The problem is when we try to get the childNodes from the node template tag
elPlate.childNodes
it returns all but <tr>
and <td>
children, as if there were no such tag inside <template>
.
Am I missing something? Are there any workarounds for this problem?
PS I was unable to add a comment to the original issue due to lack of reputation. Sorry for this.
source to share
This is because it <tr>
must be inside <table>
in order to be valid HTML. In <template>
you specified free <tr>
, which has no parent <table>
. IE sees this as a bug and removes it from the DOM. Hence, your template documentFragment
does not contain <tr>
and <td>
.
Unfortunate fact: IE just isn't ready for HTML5 tags. It will probably take a while until Microsoft implements it and the existing versions of IE browsers become really obsolete. Only then can we reliably start using HTML5 tags.
Workaround: don't use <template>
; explore template solutions using <script type="template">
. I believe they should work well. Some popular ones:
source to share
You can get around this if you really want to work with <tr>
templates in IE11.
What are you doing, instead of putting <tr>
directly into templates, you are putting the whole table this way
<template>
<table>
<tr>
//foo bar
</tr>
</table>
</template>
This causes IE11 to no longer "fix" your HTML and return it as it is. After cloning the HTML from the template, you can extract it <tr>
correctly from the table and use it wherever needed.
source to share