Skip to content

Instantly share code, notes, and snippets.

@ZMYaro
Created July 18, 2025 16:46
Show Gist options
  • Save ZMYaro/e4762a1ba64e7c3fa0f44288bc5d2bf9 to your computer and use it in GitHub Desktop.
Save ZMYaro/e4762a1ba64e7c3fa0f44288bc5d2bf9 to your computer and use it in GitHub Desktop.
Import map to use Lit with bare module specifiers
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lit Element Import Map Test</title>
<meta name="viewport" content="width=device-width">
<script type="importmap">
{
"imports": {
"lit": "/node_modules/lit/index.js",
"lit/": "/node_modules/lit/",
"lit-element": "/node_modules/lit-element/index.js",
"lit-element/": "/node_modules/lit-element/",
"lit-html": "/node_modules/lit-html/lit-html.js",
"lit-html/": "/node_modules/lit-html/",
"@lit/reactive-element": "/node_modules/@lit/reactive-element/reactive-element.js",
"@lit/reactive-element/": "/node_modules/@lit/reactive-element/"
}
}
</script>
<script type="module">
import { LitElement, html } from 'lit';
export class TestElement extends LitElement {
render() {
return html`
<h1>It works&#x203d;</h1>
`;
}
}
customElements.define('test-element', TestElement);
</script>
</head>
<body>
<test-element></test-element>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment