<!DOCTYPE html>
<html>
<head>
<style>
.test {
    width: 100px;
    height: 25px;
    background: red;
}
#host4 { background: green };
</style>
</head>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p> 
<div id="host1" class="test"></div>
<div id="host2" class="test"></div>
<div id="host3" class="test"></div>
<div id="host4" class="test"></div>
<script>
{
    var host = document.getElementById('host1');
    var shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `
        <div style="height:100%"></div>
    `;
    document.body.offsetWidth;
    var style = document.createElement("style");
    style.textContent = "div { background: green; }";
    shadow.appendChild(style);
}
{
    var host = document.getElementById('host2');
    var shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `
        <style></style>
        <div style="height:100%"></div>
    `;
    document.body.offsetWidth;
    shadow.querySelector('style').textContent = "div { background: green; }";
}
{
    var host = document.getElementById('host3');
    var shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `
        <style>div { background: red; }</style>
        <div style="height:100%"></div>
    `;
    document.body.offsetWidth;
    shadow.querySelector('style').textContent = "div { background: green; }";
}
{
    var host = document.getElementById('host4');
    var shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `
    <style>div { background: red; }</style>
    <div style="height:100%"></div>
    `;
    document.body.offsetWidth;
    shadow.querySelector('style').textContent = "";
}
</script>
</body>
</html>