audiogram-beta/index.html

<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
<div id="app"></div>

<script type="module">
import React  from "https://esm.sh/preact@10.11.3/compat";
import {html} from "https://esm.sh/htm@3.1.1/preact";

import * as TW   from "https://esm.sh/@twind/core@1.0.1";
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";

const styles = document.createElement("style");
const root = document.querySelector("#app");

const appShadow = root.attachShadow({mode: "open"});
const appShadowRoot = document.createElement("div");
appShadow.append(styles);
appShadow.append(appShadowRoot);

const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.cssom(styles));
TW.observe(inst, appShadowRoot);

const El =()=>
{
    const [StateGet, StateSet] = React.useState(false);
    return html`
    <div class=${StateGet ? "text-white bg-black": "text-red"} onClick=${e=>StateSet(!StateGet)}>
        click
    </div>
    `;
}

React.render(html`
<p class="text(yellow-500 lg) p-4 font(sans black)">
    inside (should be styled)
    <${El}/>
</p>`, appShadowRoot);

</script>