JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script type="text/javascript">

function test() {
    var SR = window.ShadowRoot || window.WebKitShadowRoot;
    var d = document;

    var host = d.createElement('div');
    d.body.appendChild(host);

    //Older tree
    var s1 = new SR(host);
    var div1 = d.createElement('div');
    div1.innerHTML = '<span id="shd1">This is an old shadow tree</span>'; 
    s1.appendChild(div1);

    //Younger tree
    var s2 = new SR(host);
    var div1 = d.createElement('div');
    div1.innerHTML = '<span id="shd2">This is a young shadow tree</span>' + 
        '<shadow><span id="shd3">This is the shadow tree fallback content</span></shadow>'; 
    s2.appendChild(div1);

    var style = d.createElement('style');
    style.innerHTML = '' + 
            '@host {' +
                'div{display:none;}' +
            '}'; 
    s2.appendChild(style);    
}
</script>
</head>
<body onload="test()">

</body>
</html>