A bland and boring router and styler for lit.
- router
- styler
pnpm i lit-litro- (You still need to)
importall the pages and templates, litro can't help you with this - Replace
@customElementto@pageor@template - Add
<litro-router></litro-router>your entry file, for exampleindex.htmlif you are using Vite.
<!-- index.html (Vite) -->
<head>
<script type="module">
import "lit-litro";
import.meta.glob("/**/*.ts", { eager: true });
</script>
</head>
<body>
<litro-router></litro-router>
</body>// src/pages/my-page.ts
import { LitElement, html } from "lit";
import { page } from "lit-litro/router";
@page("/", "hello-litro")
export class MyPage extends LitElement {
// ...
}// src/pages/my-template.ts
import { LitElement, html } from "lit";
import { template } from "lit-litro/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...