lolidk

app.js

@@ -2,15 +2,20 @@
 import React from "https://esm.sh/preact@10.11.3/compat";
 import {html} from "https://esm.sh/htm@3.1.1/preact";
 
-import {install} from "https://esm.sh/@twind/core";
-import preTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
+import TW from "https://esm.sh/@twind/core";
+import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
 import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
+
+const root = document.querySelector("#app");
+const rootShadow = root.attachShadow({mode: "open"});
+const rootShadowRoot = document.createElement("strong");
+rootShadow.append(rootShadowRoot);
+*/
+
 install({presets:[preTailwind(), preAutoprefix()]});
 
-import * as Store from "./store.js";
-import UI from "./ui.js";
 
 React.render(html`
     <p class="p-4">suuupu</p>
     <${UI.Button} label="Play Tone" icon=">" light/>
-`, document.querySelector("#app"));
+`, root);

index.html

@@ -1,6 +1,23 @@
-<svg>
-
-</svg>
-<link rel="stylesheet" type="text/css" href="https://static1.squarespace.com/static/sitecss/565afe39e4b0c377c4681146/45/52a74dafe4b073a80cd253c5/565afe3ae4b0c377c468114d/1043/site.css"/>
+<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
 <div id="app"></div>
-<script src="app.js" type="module"></script>
+
+<script type="module">
+import React from "https://esm.sh/preact@10.11.3/compat";
+
+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: "closed"});
+const appShadowRoot = document.createElement("div");
+appShadow.append(styles);
+appShadow.append(appShadowRoot);
+
+const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.dom(styles))
+TW.observe(inst, appShadowRoot)
+
+React.render(React.createElement("p", {className:"text(yellow-500 lg) p-4 font(sans-black)"}, "inside (should be styled)"), appShadowRoot);
+</script>

ui.js

@@ -2,6 +2,8 @@
 import React from "https://esm.sh/preact@10.11.3/compat";
 import {html} from "https://esm.sh/htm@3.1.1/preact";
 
+
+
 export default {
     Button({label, icon, light, disabled})
     {