<template id="shadow">
<div class="shadow-container">
Hello Shadow World!
</div>
</template>
<div id="shadow-host">Hello World!</div>
<script type="text/javascript">
var shadowHost = document.querySelector('#shadow-host'),
shadowRoot = shadowHost.createShadowRoot(),
template = document.querySelector('#shadow');
shadowRoot.appendChild(template.content.cloneNode(true));
</script>
<template id="shadow">
<div class="shadow-container">
<h2>Hello <content></content>!</h2>
</div>
</template>
<div id="shadow-host">World</div>
<template id="shadow">
<div class="shadow-container">
<h1>
Hello <content select=".world"></content>
from <content select=".location"></content>
</h1>
<div><content select="span"></content></div>
<div><content select="*"></content></div>
</div>
</template>
<div id="shadow-host">
<span class="world">Mundo</span>
<span class="location">Nueva York</span>
<span>Bogota</span>
<span>New Jersey</span>
<div>this is other stuff</div>
</div>
false - default. Keeps inheriting CSS props true - resets props at shadow boundary
true - author styles are applied to Shadow DOM elements (relative to the shadow root)