<!DOCTYPE html>
<style>
div { font-family: monospace; }
</style>
<div id="host">HOST</div>
<script>
var host = document.getElementById('host');
var root = host.attachShadow({mode: 'open'});
root.innerHTML = '\
<style>\
:host::before { content: "before shadow root:"; }\
:host::after { content: ":after shadow root"; }\
</style>\
<span>SHADOW</span>';
</script>