<html>
<body>
<my-custom-element>
<p>content-0 original</p>
<my-custom-element>
<template id="shadow-1-template">
<shadow></shadow>
<p>content-1 from shadow 1</p>
</template>
<template id="shadow-2-template">
<shadow></shadow>
<p>content-2 from shadow 2</p>
</template>
<script>
var template1 = document.getElementById('shadow-1-template').content;
var template2 = document.getElementById('shadow-2-template').content;
var elts = document.getElementsByTagName('my-custom-element');
for (var i = 0; i < elts.length; i++) {
var elt = elts[i];
var shadow1 = elt.createShadowRoot();
var content1 = template1.cloneNode(true);
shadow1.appendChild(content1);
var shadow2 = elt.createShadowRoot();
var content2 = template2.cloneNode(true);
shadow2.appendChild(content2);
}
</script>
</body>
</html>