JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<lalala id="host">
    <span>org content</span>
</lalala>

SCSS

lalala::shadow {    
    span {
        color: red;
    }
    
    div {
        line-height: 2em;
        background-color: #f00;
    }
}

JavaScript

let host = document.querySelector('lalala');
let root = host.createShadowRoot();

root.innerHTML = `
    <span>RED SHADOW</span>
    <div>this is in shadow</div>
    <content></content>
`;