Last active 10 months ago

Inline import the compiled TailwindCSS and Phoenix LiveView ViewHook and make it available to components

gaiety's Avatar gaiety revised this gist 10 months ago. Go to revision

1 file changed, 20 insertions

lit-live-with-tailwind.ts(file created)

@@ -0,0 +1,20 @@
1 + import {LitElement, unsafeCSS} from 'lit'
2 + import type {ViewHook} from 'phoenix_live_view'
3 + import styles from '../../../priv/static/assets/app.css?inline'
4 +
5 + declare global {
6 + interface HTMLElement {
7 + LitLiveHook?: ViewHook
8 + }
9 + }
10 +
11 + export default class LitLiveElement extends LitElement {
12 + static styles = [unsafeCSS(styles)]
13 + LitLiveHook?: ViewHook
14 + }
15 +
16 + export const LitLiveHook = {
17 + mounted(this: ViewHook) {
18 + this.el.LitLiveHook = this
19 + },
20 + } satisfies Partial<ViewHook>
Newer Older