javascripthtmltemplatesmicrosoft-edgeclonenode

HTML <template> on Edge (version ≥13)

I need to decide between the use of <template> or just constructing a highly nested element in Javascript using documentFragment. Using <template> would be at lot cleaner, but Edge support is critical and caniuse.com seems to indicate there's no support for version 12 and only partial support for version 13-14:

https://caniuse.com/#feat=template

  1. Does not support Document.importNode on templates, nested templates or elements that contain templates.

  2. Does not support Node.cloneNode on templates, nested templates or elements that contain templates.

The issue with this is that I can't test with Edge (not running Windows 10 nor do I have access to a browser testing suite) and I also can't find anything online about it, on MDN or in Microsoft documentation. Not being able to clone the template into the document pretty much means the standard way of using <template> goes out the window, which doesn't make sense to me because that seems to be the whole point of <template>.

The only place that claims this is caniuse.com but I've learned to trust it and it makes me uncertain about what approach to use. Chances are I'll just use documentFragment to be safe, but I'm wondering if this is an error on caniuse.com or if there is another sensible way of using <template> that is obvious and I'm missing it.

Solution

  • The following test document demonstrates that importNode and cloneNode appear to work correctly with template in Edge, at least for version 15 and up.

    <!DOCTYPE html>

<title>&lt;template&gt; testing</title>

<div id="wrapper">
    <template id="outer">lol<template id="inner">wut</template></template>
</div>

<script>
    var wrapper = document.getElementById('wrapper').cloneNode(true);
    var outer = wrapper.querySelector('#outer');
    var clone = outer.cloneNode(true);
    var inner = document.importNode(clone.content.lastChild, true);
    var content = document.importNode(inner.content, true);
    document.body.appendChild(content);
</script>

    For what it's worth, you typically wouldn't "clone the template into the document" as mentioned in your question, but rather clone the template's contents into the document: 

    let template = document.querySelector('template');
document.body.append(document.importNode(template.content, true));