Skip to content

Instantly share code, notes, and snippets.

@triptych

triptych/lit-element-in-browser.html

Forked from mcmoe/lit-element-in-browser.html
Created May 9, 2022 22:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save triptych/0ab20a72f8fbdfceb3257bbb4ff47177 to your computer and use it in GitHub Desktop.
Save triptych/0ab20a72f8fbdfceb3257bbb4ff47177 to your computer and use it in GitHub Desktop.
Download ZIP
Using Lit Element without npm directly in the browser
Raw
lit-element-in-browser.html
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment