A simple router for lit.
lit-litro
)A bland and boring router and styler for lit.
pnpm i lit-litro
import
all the pages and templates, litro can't help you with this@customElement
to @page
or @template
<litro-router></litro-router>
your entry file, for example index.html
if 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...