Loading lit from Skypack#

Lit 2 stable was released today, offering a tiny, feature-full framework for constructing web components using modern JavaScript.

The getting started documentation involves a whole lot of npm usage, but I wanted to just drop something into an HTML page and start trying out the library, without any kind of build step.

After some discussion on Twitter and with the help of @WestbrookJ I figured out the following pattern, which loads code from Skypack:

1
<script type="module">
2
import { LitElement, html } from 'https://cdn.skypack.dev/lit';
3

4
class MyEl extends LitElement {
5
  render() {
6
    return html`Hello world!`
7
  }
8
}
9
customElements.define('my-el',MyEl);
10
</script>
11
<my-el></my-el>

Also relevant: lit-dist.