@popeindustries/lit-element NPM

@popeindustries/lit-element

Seamlessly and efficiently use @popeindustries/lit-html-server rendered HTML to hydrate lit-element web components in the browser, including lazy hydration with hydrate:idle or hydrate:visible attributes.

Usage

Install with npm/yarn/pnpm:

$ npm install --save @popeindustries/lit-element

Create a web component:

import { css, html, LitElement } from '@popeindustries/lit-element';

class MyEl extends LitElement {
  static styles = css`
    p {
      color: green;
    }
  `;
  render() {
    return html`<p>I am green!</p>`;
  }
}

customElements.define('my-el', MyEl);

...render a page template on the server with @popeindustries/lit-html-server:

import './my-el.js';
import { html, renderToNodeStream } from '@popeindustries/lit-html-server';
import { hydratable } from '@popeindustries/lit-html-server/directives/hydratable.js';
import { LitElementRenderer } from '@popeindustries/lit-element/lit-element-renderer.js';
import http from 'node:http';

http.createServer(
  (request, response) => {
    response.writeHead(200);
    renderToNodeStream(html`<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <title>LitElement example</title>
        </head>
        <body>
          <my-el></my-el>
        </body>
      </html>`).pipe(response);
  },
  {
    // Register a renderer for LitElement components
    renderers: [LitElementRenderer],
  },
);

...and import the same web component in the browser to trigger hydration/render on changes:

import './my-el.js';

// Trigger hydration/initial update
document.querySelector('body > my-el').removeAttribute('hydrate:defer');

Note Due to how the lit* family of packages are minified and mangled for production, the @popeindustries/lit-element package is forced to vendor all dependencies to lit-element and @lit/reactive-element packages. This shouldn't affect normal use as long as application code does not mix imports from @popeindustries/lit-element and lit-element.