Skip to content

Instantly share code, notes, and snippets.

@sorvell

sorvell/index.html

Last active February 18, 2021 04:42
Show Gist options
  • Save sorvell/48f4b7be35c8748e8f6db5c66d36ee29 to your computer and use it in GitHub Desktop.
Save sorvell/48f4b7be35c8748e8f6db5c66d36ee29 to your computer and use it in GitHub Desktop.
Download ZIP
LitElement basic example
Raw
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>
@theengineear
Copy link 

    import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
    
    class MyElement extends LitElement {
      static get properties() { return { mood: String }}
      render() {
        return html`<style> .mood { color: green; } </style>
          Web Components are <span class="mood">${this.mood}</span>!`;
      }
      
    }
    customElements.define('my-element', MyElement);

^^ I believe that will work.

@sorvell
Copy link
Author

sorvell commented Dec 12, 2018

Updated so this example should work now.

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