JSFiddle - React, Tailwind, and code Playground

by NesterOne

HTML

<div class="outer">
    <div id="welcomeMessage">
    Welcome to My World
    </div>
    <div class="normalTree">
        Sample List
        <ul>
            <li> Item 1 </li>
            <li> Item 2 </li>
        </ul>
    </div>    
</div>

CSS

div.outer li {
    color: red;
}

div.outer{
    border: solid 1px;
    padding: 1em;
}

JavaScript

var shadowHost = document.querySelector("#welcomeMessage");
var shadowRoot = shadowHost.createShadowRoot();
shadowRoot.innerHTML = ["<div class='shadowChild'>",
                        "Shadow DOM offers us Encapsulation from",
                        "<ul>",
                        "<li>Scripts</li>",
                        "<li>Styles</li>",
                        "</ul>",
                        "</div>"
                        ].join(',').replace(/,/g,"");