lolidk
This commit is contained in:
parent
cb3187b693
commit
53184d08b4
15
app.js
15
app.js
@ -2,15 +2,20 @@
|
|||||||
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 {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
|
|
||||||
import {install} from "https://esm.sh/@twind/core";
|
import TW from "https://esm.sh/@twind/core";
|
||||||
import preTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
||||||
import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@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()]});
|
install({presets:[preTailwind(), preAutoprefix()]});
|
||||||
|
|
||||||
import * as Store from "./store.js";
|
|
||||||
import UI from "./ui.js";
|
|
||||||
|
|
||||||
React.render(html`
|
React.render(html`
|
||||||
<p class="p-4">suuupu</p>
|
<p class="p-4">suuupu</p>
|
||||||
<${UI.Button} label="Play Tone" icon=">" light/>
|
<${UI.Button} label="Play Tone" icon=">" light/>
|
||||||
`, document.querySelector("#app"));
|
`, root);
|
27
index.html
27
index.html
@ -1,6 +1,23 @@
|
|||||||
<svg>
|
<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
|
||||||
|
|
||||||
</svg>
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://static1.squarespace.com/static/sitecss/565afe39e4b0c377c4681146/45/52a74dafe4b073a80cd253c5/565afe3ae4b0c377c468114d/1043/site.css"/>
|
|
||||||
<div id="app"></div>
|
<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>
|
||||||
|
Before Width: | Height: | Size: 267 B After Width: | Height: | Size: 902 B |
2
ui.js
2
ui.js
@ -2,6 +2,8 @@
|
|||||||
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 {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
Button({label, icon, light, disabled})
|
Button({label, icon, light, disabled})
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user