<!DOCTYPE html>
<style>
#host::before { content: "A" }
#host.block::before { display: block }
</style>
<p>You should see a space between A and B below.</p>
<div id="host" class="block"> </div>
<script>
host.offsetTop;
var root = host.attachShadow({mode:"open"});
root.innerHTML = " <span>B</span>";
host.className = "";
</script>