Skip to content

Instantly share code, notes, and snippets.

@pinkhominid
Last active May 22, 2020 21:34
Show Gist options
  • Save pinkhominid/301007797a306c949770f24f2a74c9a8 to your computer and use it in GitHub Desktop.
Save pinkhominid/301007797a306c949770f24f2a74c9a8 to your computer and use it in GitHub Desktop.
Minimal Lit Element Starter
<!--
mkdir hello-world
cd hello-world
npm init -y
npm i es-module-shims lit-element
curl -O https://gist.githubusercontent.com/pinkhominid/301007797a306c949770f24f2a74c9a8/raw/b963f6205c2436f994b7e32182247d9a1cf1aba5/index.html
npm i -D http-server
npx http-server -o
-->
<script defer src="./node_modules/es-module-shims/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"lit-html": "./node_modules/lit-html/lit-html.js",
"lit-html/": "./node_modules/lit-html/",
"lit-element": "./node_modules/lit-element/lit-element.js"
}
}
</script>
<script type="module-shim">
import { LitElement, html, css } from 'lit-element'
class HelloWorldElem extends LitElement {
render() {
return html`
<p>Hello World!</p>
`
}
}
customElements.define('hello-world', HelloWorldElem)
</script>
<hello-world></hello-world>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment