From 53184d08b45fed4f96598307a0854727116c2a0a Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Thu, 24 Nov 2022 14:15:34 -0500
Subject: [PATCH] lolidk

---
 app.js     | 15 ++++++++++-----
 index.html | 27 ++++++++++++++++++++++-----
 ui.js      |  2 ++
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/app.js b/app.js
index 923e0d0..93028c3 100644
--- a/app.js
+++ b/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"));
\ No newline at end of file
+`, root);
\ No newline at end of file
diff --git a/index.html b/index.html
index d0142ae..a3d9faa 100644
--- a/index.html
+++ b/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>
diff --git a/ui.js b/ui.js
index 494b51f..a81c886 100644
--- a/ui.js
+++ b/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})
     {