<!DOCTYPE html> | |
<body class=shadow> | |
<div id="host">HOST</div> | |
</body> | |
<script> | |
var host = document.getElementById('host'); | |
var root = host.attachShadow({mode: 'open'}); | |
root.innerHTML = '\ | |
<style>\ | |
:host-context(body.shadow)::before { content: "before shadow root:"; }\ | |
:host-context(body.light)::before { content: "this should not appear:"; }\ | |
</style>\ | |
<span>SHADOW</span>'; | |
</script> |