larsgk/test-lit-html.js

## test-lit-html.js
<html>
    <script type="module">
      import { html, render } from './lit-html.min.js';

      class MyGreater extends HTMLElement {
        static get observedAttributes() { return ['data-names']; }

        constructor() {
          super();
          this.attachShadow({mode: 'open'});
          this._names = null;
          this._count = 0;
        }

        attributeChangedCallback(attr, oldValue, newValue) {
          console.log(attr);

          if (attr == 'data-names') {
            this._names = newValue.split(',');
            this._count = 0;
            this.invalidate();
          }
        }

        render() {
            if(this._count >= this._names.length)
                this._count = 0;
          return html`
            Hi <b>${this._names ? this._names[this._count++] : "some body"}</b>
          `;
        }

        connectedCallback() {
          this.invalidate();

          setInterval(this.invalidate.bind(this), 1000);
        }

        invalidate() {
         if (!this.needsRender) {
           this.needsRender = true;
           Promise.resolve().then(() => {
             this.needsRender = false;
             render(this.render(), this.shadowRoot);
           });
         }
       }
      }

      class FancyGreater extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({mode: 'open'});
        }

        render() {
          return html`
            <style>
              div {
                background-color: green;
              }
            </style>

            <div>
              <my-greeter data-names="fancy-pancy,happy,joy,dance"></my-greeter>
            </div>
          `;
        }

        connectedCallback() {
          this.invalidate();
        }

        invalidate() {
         if (!this.needsRender) {
           this.needsRender = true;
           Promise.resolve().then(() => {
             this.needsRender = false;
             render(this.render(), this.shadowRoot);
           });
         }
       }
      }

      customElements.define('my-greeter', MyGreater);
      customElements.define('fancy-greeter', FancyGreater);
    </script>
    <body>
      <my-greeter data-names="Kenneth">Hi someone</my-greeter>
      <br>
      <fancy-greeter></fancy-greeter>
    </body>
    </html>
	<html>
	<script type="module">
	import { html, render } from './lit-html.min.js';

	class MyGreater extends HTMLElement {
	static get observedAttributes() { return ['data-names']; }

	constructor() {
	super();
	this.attachShadow({mode: 'open'});
	this._names = null;
	this._count = 0;
	}

	attributeChangedCallback(attr, oldValue, newValue) {
	console.log(attr);

	if (attr == 'data-names') {
	this._names = newValue.split(',');
	this._count = 0;
	this.invalidate();
	}
	}

	render() {
	if(this._count >= this._names.length)
	this._count = 0;
	return html`
	Hi <b>${this._names ? this._names[this._count++] : "some body"}</b>
	`;
	}

	connectedCallback() {
	this.invalidate();

	setInterval(this.invalidate.bind(this), 1000);
	}

	invalidate() {
	if (!this.needsRender) {
	this.needsRender = true;
	Promise.resolve().then(() => {
	this.needsRender = false;
	render(this.render(), this.shadowRoot);
	});
	}
	}
	}

	class FancyGreater extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({mode: 'open'});
	}

	render() {
	return html`
	<style>
	div {
	background-color: green;
	}
	</style>

	<div>
	<my-greeter data-names="fancy-pancy,happy,joy,dance"></my-greeter>
	</div>
	`;
	}

	connectedCallback() {
	this.invalidate();
	}

	invalidate() {
	if (!this.needsRender) {
	this.needsRender = true;
	Promise.resolve().then(() => {
	this.needsRender = false;
	render(this.render(), this.shadowRoot);
	});
	}
	}
	}

	customElements.define('my-greeter', MyGreater);
	customElements.define('fancy-greeter', FancyGreater);
	</script>
	<body>
	<my-greeter data-names="Kenneth">Hi someone</my-greeter>
	<br>
	<fancy-greeter></fancy-greeter>
	</body>
	</html>