Shadow DOMの動作サンプルです。Shadow DOMで使われるセレクタは、CSS Scoping Moduleによってサポートされています。
<style>
#host {
padding: 5px;
}
::shadow span {
text-decoration: underline;
}
</style>
<div id="host">I'm Host</div>
<!-- template内はShadow Rootに追加されると仮定 -->
<template id="tmpl">
<style>
:host {
border: 4px dotted black;
}
#guest {
border: 4px double black;
}
</style>
<p id="guest">Hello! <span>Shadow DOM</span></p>
</template>
<script>
var host = document.getElementById('host');
var tmpl = document.getElementById('tmpl');
var root = host.createShadowRoot();
root.appendChild(tmpl.content.cloneNode(true));
</script>
Hello! Shadow DOM