Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
Seth Trowbridge 2022-11-24 19:44:05 -05:00
parent 53184d08b4
commit 5b27cc07d4
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -2,22 +2,38 @@
<div id="app"></div> <div id="app"></div>
<script type="module"> <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 TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1"; import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
const styles = document.createElement("style"); const styles = document.createElement("style");
const root = document.querySelector("#app"); const root = document.querySelector("#app");
const appShadow = root.attachShadow({mode: "closed"}); const appShadow = root.attachShadow({mode: "open"});
const appShadowRoot = document.createElement("div"); const appShadowRoot = document.createElement("div");
appShadow.append(styles); appShadow.append(styles);
appShadow.append(appShadowRoot); appShadow.append(appShadowRoot);
const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.dom(styles)) const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.cssom(styles));
TW.observe(inst, appShadowRoot) 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> </script>