Using Lit with Javascript and no build tools

Question

I am building a desktop app that monitors some things and generates data about what it is monitoring. When the user wants to interact with the data the app starts a very simple web server. The server serves static pages and has a basic http API to serve the data. I use html as a universal UI, the user uses their browser to view and interact with the data.

I would like to rewrite my html/css/js into a component based web app using Google's Lit 2. I like the idea of plain web components but I noticed that Lit offers some great additional features. Not surprisingly, most of the Lit docs are geared toward a more traditional web environment with a build step. I want to see if I can keep my server as simple as possible and avoid traditional backend tools (typescript compilation, minification, etc). I would like to replace my current static html/css/js with Lit components in a series of simple js files.

Currently, my server serves my pages from a 'public' directory and has a minimal http API:

- public/
 -- js/
 -- css/
 -- index.html

How should I use Lit in a system without a build step? What is the minimum set of Lit files I would need to serve along with my own javascript classes that inherit from LitElement?

Forwhy

@Danny'365CSI'Engelman I started my rewrite using React. I liked the components but I was a little annoyed with all of the tooling (my web server runs locally and is about as simple and bare bones as you can get). I looked at several other frameworks and thought Lit would be easy to plug in to my unusual environment and I liked the html template string and auto-diffing that Lit does. But, it appears it is not as easy as I thought it would be to get it in my environment. So, now I am experimenting with plain old web components. – Forwhy

Not old, vanilla web components gives you everything you want, and zero upgrading issues in the future (Lit2 did have breaking changes). Analyze Lit and copy the features you want to your own baseclass, and you are set for the next 25 javascript years. – Axiology

Answer 1

2022 update: Starting with version 2.2.0, lit is also available as a pre-built bundle, see https://lit.dev/docs/getting-started/#use-bundles

<simple-greeting name="World"></simple-greeting>

<script type="module">
import {html, css, LitElement} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/core/lit-core.min.js';

export class SimpleGreeting extends LitElement {
  static get styles() {
    return css`p { color: blue }`;
  }

  static get properties() {
    return {
      name: {type: String}
    }
  }

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElements.define('simple-greeting', SimpleGreeting);
</script>

---

Original answer:

The Lit team doesn't provide a pre-built bundle as of 2021-08-01, you have to build yourself (to resolve the bare module specifiers, such as import .. from 'lit-html', which are not supported by browsers yet)

If you're fine with relying on a third-party CDN and supporting modern browsers only, skypack is very useful, as you can simply import lit from 'https://cdn.skypack.dev/lit'; in a web page.

(If you open https://cdn.skypack.dev/lit and then the pinned URL specified in comments, you can see there are only 5 JS modules involved, so extracting them from lit's source by hand to host as part of your application shouldn't be very hard either.)

Niblick

This example uses unpkg.com/lit-element/lit-element.js?module as the CDN. gist.github.com/mcmoe/a5292cecfde3cf4fdf997e8b6a25790f – Annelieseannelise

Update, the Lit team now provides a bundle: lit.dev/docs/getting-started/#use-bundles – Weight

Well, since only the minified version is provided and they don't compile *.d.ts files along with *.js, it's rather notorious approach for my use case. – Bartko

The bundles linked in the Lit docs also do not include the decorators – Rosefish

Answer 2

The official bundles don't support essential feature like Context.

Unpkg does not work with Lit version 3.

I was able to get this working using Esm.sh

import { LitElement, html } from 'https://esm.sh/lit';
import { createContext, ContextProvider } from 'https://esm.sh/@lit/context';


const simpleContext = createContext('simple-context');

export class SimpleGreeting extends LitElement {

   provider = new ContextProvider(this, {
      context: simpleContext,
      initialValue: {
         a: 1
      }
   })

   constructor() {
      super();
   }

   render() {
      return html`<p>Hello, World!</p>`;
   }
}

customElements.define('simple-greeting', SimpleGreeting);

Nadiya