Polyfill is removing `innerHtml`
Opened this issue · 4 comments
Since the polyfill is using appendChild
the original nodes are moved from their original position into the document fragment. That is incorrect, as this makes template.innerHtml
empty, which it should not. A simple fix could be to simply clone the node.
I understand what you're saying, but what's the use case for retaining innerHTML? Could innerHTML be cached and restored later?
It's half a year since I looked into this, at another company, but as far as I remember this proved troublesome as it broke some basic assumptions on how the DOM works.
I think this was the problem:
I stored Underscore templates in the <template>
tags and used _.template(templateNode.innerHtml)
to compile them. That worked fine in modern browsers, and actually in older browsers as well (without your polyfill, but with the CSS fix), but the polyfill broke it in IE11.
Well, that's an owie since I'm thinking about IE11 (if I had another choice I'd use it).
Okay, here's a problem. Just cloning won't work as written because the while() loop depletes the child list by moving the node, so that loop would be infinite if the script just clones the child list.
Well, I took all the issues into consideration and wrote a version that addresses every one of them--except it needs an Array.from() polyfill (which Google Closure Compiler provides automatically--nice). I used node cloning and IE11 works just fine with it. It even includes adding the template style to the stylesheet.