HTML-шаблоны Полифиллы JavaScript

Существует jsfiddle, демонстрирующий такой полифилл.

<script>
    // Shim so we can style in IE6/7/8
    document.createElement('template');
</script>

<template id="example">
    <h1>
        This is template content.
    </h1>
    <p>
        It's really great.
    </p>
</template>


<div id="target">
    <p>
        This is regular old content.
    </p>
</div>

/* POLYFILL */
(function templatePolyfill(d) {
    if('content' in d.createElement('template')) {
        return false;
    }

    var qPlates = d.getElementsByTagName('template'),
        plateLen = qPlates.length,
        elPlate,
        qContent,
        contentLen,
        docContent;

    for(var x=0; x<plateLen; ++x) {
        elPlate = qPlates[x];
        qContent = elPlate.childNodes;
        contentLen = qContent.length;
        docContent = d.createDocumentFragment();

        while(qContent[0]) {
            docContent.appendChild(qContent[0]);
        }

        elPlate.content = docContent;
    }
})(document);

/* EXAMPLE */
var elExample = document.getElementById('example'),
    elTarget = document.getElementById('target');

elTarget.appendChild(elExample.content.cloneNode(true));

Что касается библиотек, и я не знаю, поддерживают ли они это, но попробуйте что-то вроде Modernizr и Инициализ

Xotic750 предложил надежный полифилл, который работает путем мутации элементов HTML, но он потерпит неудачу, если какие-либо новые шаблоны будут позже добавлены в DOM, а мутация все чаще не рекомендуется (там, где ее можно избежать).

Вместо этого я рекомендую ввести поведение «полифилл» в тот момент, когда вы используете шаблоны. Добавьте эту функцию в свой JS:

function templateContent(template) {
    if("content" in document.createElement("template")) {
        return document.importNode(template.content, true);
    } else {
        var fragment = document.createDocumentFragment();
        var children = template.childNodes;
        for (i = 0; i < children.length; i++) {
            fragment.appendChild(children[i].cloneNode(true));
        }
        return fragment;
    }
}

Вызовите функцию со ссылкой на ваш элемент шаблона. Он извлечет содержимое и вернет documentFragment, который затем можно прикрепить к другому элементу (или сделать что-то еще, что вы можете сделать с содержимым шаблона). Как это:

var template = document.querySelector("template#my-template");
var content = templateContent(template);
someElm.appendChild(content);

Теперь в другом ответе об этом не упоминалось, но вы, вероятно, хотите, чтобы CSS скрыл элемент <template>.

template { display: none; }

Вот CodePen, который объединяет все это.

Теперь это будет корректно работать в браузерах, изначально поддерживающих элемент <template>, и в тех, которые его не поддерживают. Как и в другом ответе, это не идеальный полифилл, поскольку он не делает шаблоны инертными (это было бы сложно, медленно и подвержено ошибкам). Но он работает достаточно хорошо для меня, чтобы использовать его в производстве.

Оставьте комментарий, если у вас есть вопросы или проблемы, и я внесу соответствующие изменения.

Другой возможностью являются полифиллы веб-компонентов, которые включают полифилл для тега <template>. Имейте в виду, что webcomponents.js содержит полифиллы не только для тега <template>.

Еще одна возможность — Template-Element-Polyfill от Neovov.

Это специальный <template> полифил, который вы можете найти на Github.