Shadow DOM において、テンプレートのスロットとのマッピングを指定します。
<template id="shadow-dom-template">
Title: [ <slot name="title"></slot> ],
Artist: [ <slot name="artist"></slot> ]
</template>
<div class="song">
<span slot="title">Let it be</span>
<span slot="artist">The Beatles</span>
</div>
<div class="song">
<span slot="title">Scarborough Fair</span>
<span slot="artist">Simon & Garfunkel</span>
</div>
<script>
var hostElements = document.getElementsByClassName("song");
for (var i = 0; i < hostElements.length; i++) {
var rootElement = hostElements[i].attachShadow({mode: "open"});
var templeteContent = document.getElementById("shadow-dom-template").content.cloneNode(true);
rootElement.appendChild(templeteContent);
}
</script>