Skip to content

Instantly share code, notes, and snippets.

@mcmoe
Created March 19, 2021 07:57
Show Gist options
  • Save mcmoe/a5292cecfde3cf4fdf997e8b6a25790f to your computer and use it in GitHub Desktop.
Save mcmoe/a5292cecfde3cf4fdf997e8b6a25790f to your computer and use it in GitHub Desktop.
Using Lit Element without npm directly in the browser
<!-- From: https://gist.githubusercontent.com/sorvell/48f4b7be35c8748e8f6db5c66d36ee29/raw/67346e4e8bc4c81d5a7968d18f0a6a8bc00d792e/index.html -->
<!doctype html>
<html>
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
class MyElement extends LitElement {
static get properties() {
return {
mood: {type: String}
}
}
static get styles() {
return css`.mood { color: green; }`;
}
render() {
return html`Web Components are <span class="mood">${this.mood}</span>!`;
}
}
customElements.define('my-element', MyElement);
</script>
<my-element mood="great"></my-element>
</body>
</html>
@kpym
Copy link

kpym commented Sep 26, 2021

Thanks for the tip. I was not able from the official documentation to figure out that lit sould be replaced by https://unpkg.com/lit-element/lit-element.js?module everywhere. 🙏

@triptych
Copy link

triptych commented May 9, 2022

Thank you so much! The docs on the site never mention this essential part of doing this client side and finally finding this helps so much.

@mcmoe
Copy link
Author

mcmoe commented May 10, 2022

Glad to be of help 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment