Shadow DOM 301

by Takayoshi Kochi

HTML

<div id="outer">
    <div id="host">
        <span class=a>aaa</span>
        <span class=b>bbb</span>
    </div>
</div>
<template id="t">
    <h1>hoge</h1>
    <shadow></shadow>
    <content select=".b"></content>
    <content select=".b"></content>
</template>

JavaScript

var d = document;
var host = d.querySelector('#host');
var root1 = host.createShadowRoot();
var root2 = host.createShadowRoot();
var t = d.querySelector('#t');
var div = d.createElement('div');
div.textContent = 'abc';
root1.appendChild(div);
root2.appendChild(t.content.cloneNode(true));
console.log(host.shadowRoot)