Packaging LitElement

After constructing some helpful knowledge around custom elements and other modern browser tech through many different experiments, our interest returns to the Polymer project's LitElement. The Flaws of Web Components characterizes the challenges. It also suggests that LitElement and some other options help with some of the limits. article

.

The LitElement Getting Started Guide starts directly with the modern javascript assumption that you're going to be using a node build pipeline. guide

But development life is so much better without build pipelines.

I'm not the first to ask for a way to use LitElement without npm: issue

Unpkg and pika.dev are suggested. Pika.dev changed to snowpack.dev.

After many different attempts I finally settled on using snowpack to build my own copy of an ES6 module to import.

Even snowpack suggests its own inclusion as a dev dependency for your project. I've chosen to create a rebuild script which uses their app-template solely to extract a vendored copy of the packaged library.

Also published as dobbs/lit-example github .

#!/bin/bash set -euo pipefail IFS=$'\n\r\t' npx create-snowpack-app ./tmp \ --template @snowpack/app-template-lit-element cd tmp npm install --save-dev @snowpack/plugin-optimize mv snowpack.config.json snowpack.config.orig.json jq '.plugins[0]=["@snowpack/plugin-optimize"]' \ snowpack.config.orig.json \ > snowpack.config.json npm run build mv build/web_modules/* ..

//wiki.dbbs.co/assets/packaging-litelement/index.html HEIGHT 505

packaging-litelement