Getting Started

Hosting

Ecosystem

Tutorials

On This Page

  1. Installation
  2. SSR

Lit

Lit 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.

Installation

As with most libraries, just install lit with your favorite package manager as a dependency.

npm i lit

Now you can start writing Lit based Web Components!

<html>
  <head>
    <script type="module">
      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>`;
        }
      }
      customElements.define("simple-greeting", SimpleGreeting);
    </script>
  </head>

  <body>
    <simple-greeting></simple-greeting>
    <simple-greeting name="Greenwood"></simple-greeting>
  </body>
</html>

That's it!

SSR

To enable Lit and SSR you can install our Greenwood plugin and add it to your greenwood.config.js.

import { greenwoodPluginRendererLit } from "@greenwood/plugin-renderer-lit";

export default {
  plugins: [greenwoodPluginRendererLit()],
};

Please see the README to learn more about full usage details and caveats.

Edit on GitHub