webcomponents-lite.js does not polyfill importNode/cloneNode for Template #362
Comments
|
(0.7.17) Although webcomponentsjs is working, just want to point out that webcomponents-lite.js is still not working for IE11 |
|
(0.7.20) polyfill template. after decorate template with inner template then doing importNode(template, true), the inner template not cloned as it should (empty template). <template id="t">
outer template content
<template id="inner-t">
inner template content
</template>
</template>
<script>
HTMLTemplateElement.decorate(t);
console.log('template content clone');
var cloned = document.importNode(t.content, true);
console.log('t.content innerHTML: ' + t.content.querySelector('#inner-t').innerHTML);
console.log('t.content content : ' + t.content.querySelector('#inner-t').content.childNodes.length);
console.log('cloned innerHTML: ' + cloned.querySelector('#inner-t').innerHTML);
console.log('cloned content : ' + cloned.querySelector('#inner-t').content.childNodes.length);
</script> |
|
Confirming this - although I think the cause of the problem is not quite as previously described. Neither template.js nor webcomponents-lite.js can run <!DOCTYPE html>
<html>
<head>
<title>Testing web components</title>
</head>
<body>
<!-- Also try https://rawgit.com/webcomponents/webcomponentsjs/v0.7.22/webcomponents-lite.js or https://rawgit.com/webcomponents/webcomponentsjs/master/src/Template/Template.js -->
<script src="https://rawgit.com/webcomponents/webcomponentsjs/v0.7.22/webcomponents.js"></script>
<template id="template">
<div>
<p style="color: red;">Hello, world!</p>
</div>
</template>
<script>
var template = document.getElementById('template').content,
clone = document.importNode(template, true), // throws error unless using all polyfills
wrapper = document.createElement('div');
wrapper.id = 'clone';
wrapper.appendChild(clone);
document.body.appendChild(wrapper);
console.log(document.getElementById('clone'));
</script>
</body>
</html>The error that this produces in IE 11 for webcomponents-lite.min.js v0.7.22 looks something like: That error happens in var f = document.createDocumentFragment();
f.appendChild(document.createElement('div');
console.log(f.children.length);With webcomponents.js, this will return Here is a workaround to get templates working in IE 11. It does not provide a polyfill; instead it provides a function, cloneTemplate, that accepts a <!DOCTYPE html>
<html>
<head>
<title>Testing web components</title>
<style>template { display: none; }</style>
</head>
<body>
<template id="template">
<div>
<p style="color: red;">Hello, world!</p>
</div>
</template>
<script>
function cloneTemplate(templateElement) {
try {
return document.importNode(templateElement.content, true);
}
catch (e) {
var wrapper = document.createElement('div'),
fragment = document.createDocumentFragment();
wrapper.innerHTML = templateElement.innerHTML;
while (wrapper.firstChild) {
var child = wrapper.removeChild(wrapper.firstChild);
fragment.appendChild(child);
}
return fragment;
}
}
var template = document.getElementById('template'),
clone = cloneTemplate(template),
wrapper = document.createElement('div');
wrapper.id = 'clone';
wrapper.appendChild(clone);
document.body.appendChild(wrapper);
console.log(document.getElementById('clone'));
</script>
</body>
</html> |
|
This was solved in #489 and looks like the issue wasn't closed (current code implementation is located at https://github.com/webcomponents/template/blob/master/template.js#L266-L276). Any issues with |
Calling
document.importNode(template, true)on a template on IE will not result in the template content being cloned as it should. Likewise, callingdocument.importNode(fragContainingTemplate, true)on a document fragment containing a nested template will not result in that template's content being cloned either.Note Safari has a bug in their native Template implementation that manifests itself in basically the same way (nested template content is empty, see https://bugs.webkit.org/show_bug.cgi?id=137619) which could benefit from the same polyfill implementation. Note the Safari bug has been resolved in Webkit nightly but has not yet shipped in a stable version of Safari on Mac or iOS.
The text was updated successfully, but these errors were encountered: