mcmoe/lit-element-in-browser.html

## 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>
	<!-- 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>