Back to packages list
Vals using lit
Description from the NPM package:
A library for building fast, lightweight web components
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { css, html, LitElement } from "https://esm.sh/lit@3.1.2";
export class SimpleGreeting extends LitElement {
static properties = {
name: {},
};
// Define scoped styles right with your component, in plain CSS
static styles = css`
:host {
color: blue;
}
`;
constructor() {
super();
// Declare reactive properties
this.name = "World";
}
// Render the UI as a function of component state
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
customElements.define("simple-greeting", SimpleGreeting);
lit
Lit is kind of like Google's answer to React: it's a little more reliant on browser APIs like custom elements and the shadow DOM, a little less 'magic', like using JSX.
This is an example of using Lit and rendering it straight to a string, which is something that's recently popular. It works pretty well, right off the bat: Lit provides nice ESM modules and a pretty smooth workflow!
1
2
3
4
5
6
7
8
9
10
11
12
export let litExample = (async () => {
const { html } = await import("npm:lit");
const { render } = await import("npm:@lit-labs/ssr");
const { collectResult } = await import(
"npm:@lit-labs/ssr/lib/render-result.js"
);
const name = "Tom";
const page = html`<div>
Hello ${name}
</div>`;
return collectResult(render(page));
})();