2022-11-24 14:15:34 -05:00
|
|
|
<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
|
2022-11-24 12:16:57 -05:00
|
|
|
<div id="app"></div>
|
2022-11-24 14:15:34 -05:00
|
|
|
|
|
|
|
|
<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>
|
