1

したがって、Polymer を使用すると、"repeat" 属性を使用して、ShadowDOM ツリー内のコンテンツを繰り返すことができます。しかし、ネイティブの ShadowDOM 仕様でこれを行うにはどうすればよいでしょうか? それは可能ですか？

この例では: http://css-tricks.com/modular-future-web-components/ 作成者は nth-of-type 関数を使用します。ただし、実際の DOM の要素が何回繰り返されるか (この場合は 4 回) がわかっている場合は機能します。私が達成したいのは、無限の回数の繰り返しを処理できるようにすることです。

4

1 に答える 1

2

これは非常に簡単です。テンプレートを使用すると、それはなくなります。したがって、コンテンツを繰り返すには、必要なコンテンツでテンプレートを更新し、そのクローンを作成して、作成したばかりのクローンを使用するだけです。

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>

この方法を使用すると、テンプレートを何度でも再利用できます。

于 2015-04-03T05:11:38.520 に答える