<!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>
var root = host.attachShadow({mode:"open"});
root.innerHTML = '<slot name="fallback"> </slot>B</div>';
host.offsetTop;
host.className = "";
</script>