@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:

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

Create a web component:

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

class MyEl extends LitElement {
static styles = css
p {
color: green;
}
;
render() {
return html

I am green!

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

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

`js
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








).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:

`js
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`.