Can I use ES Modules library from CDN?

Question

I want to use this library via CDN.
https://www.jsdelivr.com/package/npm/lit-element

My js code is here.

import { LitElement, html } from "https://cdn.jsdelivr.net/npm/[email protected]/lit-element.js";

class MyElement extends LitElement {
    render(){
        return html`ABCD`
    }
}

customElements.define("my-element", MyElement)

I get following error.

Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../".

Do I have to build using npm ?

---

Update

Following code works.

import { LitElement, html } from "https://unpkg.com/lit-element/lit-element.js?module"

class MyElement extends LitElement {
    render(){
        return html`ABCD`
    }
}

customElements.define("my-element", MyElement)

Answer 1

Inside LitHtml and LitElement modules use bare module specifiers internally to import dependencies, and these aren't supported by JS modules yet. LitElement has import { TemplateResult } from 'lit-html', but JS needs that 'lit-html' replaced with whatever path to the actual file (not the abstract name of the package).

If you use the npm packages (which cdn.jsdelivr.net is serving up here) you have to use a build step (WebPack, Rollup, etc) to resolve all those import statements to either the file paths JS supports or inline all the files together.

The former is what unpkg.com ... ?module does, it replaces the bare reference to lit-html with the absolute https://unpkg.com/lit-html@^1.1.1/lit-html.js?module.