Question

所以我知道，使用Polymer，您可以使用“repeat”属性重复ShadowDOM树中的内容。但是如何在原生ShadowDOM规范中执行此操作？那可能吗？

在此示例中：http://css-tricks.com/modular-future-web-components/作者使用nth-of-type函数。但是当你知道实际DOM中的一个元素将要重复多少次时（在这种情况下为4），它就可以工作。我想要实现的是能够处理无限次重复。

Answer 1

这非常简单。一旦你使用了模板，它就消失了。因此，要重复内容，您只需要使用所需内容更新模板，然后对其进行克隆，并使用刚刚创建的克隆。

<强> JSFiddle Example

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>

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

ShadowDOM：我该如何重复内容？

1 个答案: