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:

<script type="module">
import { LitElement, html } from 'https://cdn.skypack.dev/lit';
  
class MyEl extends LitElement {
  render() {
    return html`Hello world!`
  }
}
customElements.define('my-el',MyEl);
</script>
<my-el></my-el>

Also relevant: lit-dist.

Related

• npm Publishing a Web Component to npm - 2021-11-28
• web-components Understanding Kristofer Joseph's Single File Web Component - 2021-10-27
• npm Running self-hosted QuickJS in a browser - 2024-03-20
• javascript Using packages from JSR with esbuild - 2024-03-02
• npm Annotated package.json for idb-keyval - 2022-02-10
• typescript Very basic tsc usage - 2020-09-06
• npm Upgrading packages with npm - 2022-07-13
• javascript Minifying JavaScript with npx uglify-js - 2020-08-30
• webassembly Compiling to WASM with llvm on macOS - 2022-03-28
• github-actions Serving a JavaScript project built using Vite from GitHub Pages - 2023-10-23

Created 2021-09-21T18:03:21-07:00, updated 2021-11-21T16:44:18-08:00 · History · Edit