On This Page
Lit
Lit (opens in a new window) builds on top of the Web Components standards, adding additional developer experience ergonomics like reactivity, declarative templates and reducing boilerplate. Lit also has support for SSR (server-side rendering), which Greenwood supports through a plugin.
You can see a complete hybrid project example in this demonstration repo (opens in a new window) as well as demos (opens in a new window) of using Lit based component libraries like Shoelace (opens in a new window) and Spectrum Web Components (opens in a new window) with Greenwood.
Installation
As with most libraries, just install lit with your favorite package manager as a dependency.
npm i lit
yarn add lit
pnpm add lit
Now you can start writing Lit based Web Components!
import { html, css, LitElement } from "lit";
export class SimpleGreeting extends LitElement {
static styles = css`
p {
color: blue;
}
`;
static properties = {
name: { type: String },
};
constructor() {
super();
this.name = "Somebody";
}
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
That's it!
SSR
To enable Lit and SSR (opens in a new window) you can install our Greenwood plugin (opens in a new window) and add it to your greenwood.config.js.
import { greenwoodPluginRendererLit } from "@greenwood/plugin-renderer-lit";
export default {
plugins: [greenwoodPluginRendererLit()],
};
Please see the README (opens in a new window) to learn more about full usage details and caveats.