@popeindustries/lit-element
v3.1.2
Published
Enable hydration of lit-element elements rendered on the server with @popeindustries/lit-html-server
Downloads
2,736
Readme
@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-elementCreate 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-elementpackage is forced to vendor all dependencies tolit-elementand@lit/reactive-elementpackages. This shouldn't affect normal use as long as application code does not mix imports from@popeindustries/lit-elementandlit-element.