0.1.1 • Published 16 days ago
lit-tit v0.1.1
tit (lit-tit
)
A bland and boring router and styler for lit.
- router
- styler
Install
pnpm i lit-tit
Usage
Router
- (You still need to)
import
all the pages and templates - Replace
@customElement
to@page
or@template
- Add
<tit-router></tit-router>
your entry file, for exampleindex.html
if you are using Vite.
<!-- index.html (Vite) -->
<head>
<script type="module">
import "lit-tit";
import.meta.glob("/**/*.ts", { eager: true });
</script>
</head>
<body>
<tit-router></tit-router>
</body>
// src/pages/my-page.ts
import { LitElement, html } from "lit";
import { page } from "lit-tit/router";
@page("/", "hello-tit")
export class MyPage extends LitElement {
// ...
}
// src/pages/my-template.ts
import { LitElement, html } from "lit";
import { template } from "lit-tit/router";
@template(0, (path) => path.includes("goodbye") , "are-you-joking")
export class MyTemplate extends LitElement {
// ...
}
Styler
Make lit follow CSS's scoping rules?
I still have no clue about this...