HTML模板JavaScript多边形填充

我正在寻找最符合标准/最经得起未来考验的前端HTML模板制作方法

存在一种相对较新的方法，例如：

有没有人知道是否已经有什么好东西可以让

元素以跨浏览器的方式使用？最好符合本标准

---

困难 根据需要，这些模板具有以下属性：

• “在激活之前，其内容物实际上是惰性的”
• 脚本不运行，图像不加载，音频不播放
• “内容被认为不在文档中”
• “模板可以放置在
  、
  或
  中的任何位置。”

我认为纯粹用JavaScript多填充实现这四个属性是不可能的，因此任何解决方案都只是部分解决方案。

有一个例子演示了这种多填充

<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));

//垫片，以便我们可以在IE6/7/8中进行设计
document.createElement（“模板”）；
这是模板内容。

真的很棒。


这是常规的旧内容。

/*聚填料*/
（功能模板PolyFill（d）{
if（'content'在d.createElement（'template'）中）{
返回false；
}
var qPlates=d.getElementsByTagName（'template'），
板材长度=qPlates.长度，
elPlate，
qContent，
康特伦，
文档内容；
对于（var x=0；xXotic750）来说，它提供了一种通过变异HTML元素来工作的实心多边形填充，但是如果以后向DOM中添加任何新模板，它将失败，变异越来越不受欢迎（在可以避免的情况下）

相反，我建议在使用模板时引入“polyfill”行为。将此函数添加到JS中：

函数模板内容（模板）{
if.createElement（“模板”）中的“内容”）{
返回单据.importNode（template.content，true）；
}否则{
var fragment=document.createDocumentFragment（）；
var children=template.childNodes；
对于（i=0；i

使用对模板元素的引用调用该函数。它将提取内容，并返回一个documentFragment，然后您可以将其附加到另一个元素（或对模板内容执行任何其他操作）。如下所示：

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

现在，另一个答案没有提到它，但是您可能需要一些CSS来隐藏
元素

template { display: none; }

这是一个将所有这些放在一起的方法

现在，这将在本机支持
元素的浏览器和不支持
元素的浏览器中正常工作。与另一个答案类似，它不是一个完美的多边形填充，因为它不会使模板变为惰性（这将是复杂、缓慢和容易出错的）。但它工作良好，足以让我在生产中使用

如果您有疑问或问题，请留下评论，我将进行相应的修改。
另一种可能是，其中包括
标记的polyfill。请记住，webcomponents.js包含的polyfill不仅仅是
标记。
还有一种可能是Neovov的

你可以在Github上找到一个专用的
polyfill。
你有到JSFIDLE的链接吗？（尽管也不建议创建一个）。我知道Modernizer（Initializer似乎只是在其polyfill中包含Modernizer）它不是polyfill
s。它看起来像Modernizer，但就是这样。链接在我上面的答案中，单击文本JSFIDDLE您的答案不支持重要的要求-安全性。；）一旦你把你的模板放在浏览器中的
元素中，而不是专门处理它，你就不会有一个惰性模板。加载IE10-11，你就会看到。我不使用任何版本的IE，虽然指出安全性很有用，但OP想要：最好是符合标准的polyfill，但如果不可用，那么任何解决方案都接近它Modernizer的一句话“仅仅因为你可以使用polyfill并不意味着你应该”请注意，此polyfill对主要部分非常有效，但如果模板包含脚本标记，则不会阻止它们执行。换句话说，如果您关心ie11，请不要在模板中使用js脚本。如果您只需要模板polyfill，则只需包含（与其他答案中提到的polyfill的功能基本相同，但在domReady上）。@ernesto link的功能已经失效，因为webcomponent的模板polyfill现在是一个独立的软件包，并拥有自己的存储库。这里是：它再次移动：
template { display: none; }