Lit-html import not reachable lately in custom card

Development
1

Hi,
I am using the below import in my custom card, as explained in Dev Docs here.

import {
  LitElement,
  html,
  css,
} from "https://unpkg.com/[email protected]/lit-element.js?module";

However since yesterday seems the inner import to “lit-html” is not reachable most of the time, which makes my card unavailable.

Tried to change to https://unpkg.com/[email protected]/lit-element.js?module, it seems to be better, but also not stable.

Any solution here?
Maybe a way I can keep the whole lit-element local?

Thanks in advance.

2

Typically you could use something like rollup to compile the lit source into your card source directly.

If you look at many popular custom cards that’s what they do, then that removes the dependency on external webserver. Though it’s more work to setup the pipeline, since you’re not just dealing with a single file anymore but a compiler toolchain.

Here’s an example of a card I did this with. (I’m not an expert so maybe not the best example, but it’s the one I know offhand).

1 Like
3

BTW, if you’re looking for a quick fix, this is working for me:

import {
    LitElement,
    html,
    css
} from "https://cdn.jsdelivr.net/npm/[email protected]/+esm?module";

Based on today’s frustration, I’d like to become independent of CDNs too, though, so will take a look at the suggestion above.

4

Hi,
Actually I resolved it today by rebuilding the project structure, using toolchain, npm and parcel, to build everything offline, to 1 single file.
No more external dependencies.

Here is my custom card:

1 Like
5

Cool. I went with rollup, and also end up with everything in one file. It’s a lot less cumbersome than I expected it to be. Thanks to @karwosts for the starting point!

1 Like
6

Update
“https://cdn.jsdelivr.net/npm/[email protected]/+esm?module” to
“https://cdn.jsdelivr.net/npm/lit-element@latest/+esm?module”

7

I’ve since changed to yet another solution - thomasloven’s card-tools - this way I can still tweak my JS files in-place, without needing to “build and deploy”