mvysny/litelement.html

## litelement.html
<!doctype html>
<html>
<head>
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script src="https://code.jquery.com/jquery-2.1.2.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.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>
	<!doctype html>
	<html>
	<head>
	<!-- Polyfills only needed for Firefox and Edge. -->
	<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.2.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.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>