Shadow DOM 101

by Takayoshi Kochi

HTML

<div id="outer">
    <div id="host">
    </div>
</div>
<template id="t">
    <h1>hoge</h1>
</template>

JavaScript

var d = document;
var host = d.querySelector('#host');
var shadow_root = host.createShadowRoot();
var t = d.querySelector('#t');
shadow_root.appendChild(t.content.cloneNode(true));