From 5b27cc07d417c4410eb0c06576535afa4fd0687d Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Thu, 24 Nov 2022 19:44:05 -0500
Subject: [PATCH] tweaks

---
 index.html | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a3d9faa..751c4c6 100644
--- a/index.html
+++ b/index.html
@@ -2,22 +2,38 @@
 <div id="app"></div>
 
 <script type="module">
-import React from "https://esm.sh/preact@10.11.3/compat";
+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 * 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 appShadow = root.attachShadow({mode: "open"});
 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)
+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);
 
-React.render(React.createElement("p", {className:"text(yellow-500 lg) p-4 font(sans-black)"}, "inside (should be styled)"), appShadowRoot);
 </script>