A bland and boring router and styler for lit.
- [x] router
- [ ] styler
pnpm i lit-tit- (You still need to)
importall the pages and templates - Replace
@customElementto@pageor@template - Add
<tit-router></tit-router>your entry file, for exampleindex.htmlif 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 {
// ...
}Make lit follow CSS's scoping rules?
I still have no clue about this...