javascript - ShadowDOM：我如何重复内容？

Question

所以我知道，使用 Polymer，您可以使用“repeat”属性重复 ShadowDOM 树中的内容。但是如何在本机 ShadowDOM 规范中做到这一点？那可能吗？

在这个例子中：http ://css-tricks.com/modular-future-web-components/作者使用了 nth-of-type 函数。但是，当您知道实际 DOM 中的元素将被重复多少次（在本例中为 4 次）时，它就会起作用。我想要实现的是能够处理无限次数的重复。

Answer 1

这很简单。一旦你使用了模板，它就消失了。所以要重复内容，你只需要用你想要的内容更新模板，然后克隆它，并使用你刚刚创建的克隆。

JSFiddle 示例

if ('content' in document.createElement('template')) {

var target = document.querySelector('.content-container'),
aside = target.content.querySelectorAll("aside");
aside[0].textContent = "Shadow DOM Content";
aside[1].textContent = "More Shadow DOM Content";
aside[2].textContent = "Even More Content!";

// Clone the new row and insert it into the table
var section = document.getElementsByClassName("first-section")
var clone = document.importNode(target.content, true);
section[0].appendChild(clone);

// Create a new row
aside[0].textContent = "test 1";
aside[1].textContent = "test 2";
aside[2].textContent = "test 3";

// Clone the new row and insert it into the table
var clone2 = document.importNode(target.content, true);
section[0].appendChild(clone2);

} else {
    // do something else
}

body {
    background: lightgrey;
}

.first-section aside {
    background: grey;
    padding: 5px;
}

.first-section aside:nth-child(3n) {
    margin-bottom: 15px;
}

<div>
    <div class="first-section">
        A repeated use of template:
    <div>
</div>

<template class="content-container">
    <aside></aside>
    <aside></aside>
    <aside></aside>
</template>

使用此方法，您可以根据需要多次重复使用您的模板。