On This Page

  1. Installation
  2. SSR

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.