kenchris/.html

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

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

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

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

      if (attr == 'data-name') {
        this._name = newValue;
        this.invalidate();
      }
    }

    render() {
      return html`
        Hi <b>${this._name ? this._name : "some body"}</b>
      `;
    }

    connectedCallback() {
      this.invalidate();
    }

    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-name="fancy-pancy"></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-name="Kenneth">Hi someone</my-greeter>
  <br>
  <fancy-greeter></fancy-greeter>
</body>
</html>
	<html>
	<script type="module">
	import { html, render } from '/lit-html.js';

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

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

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

	if (attr == 'data-name') {
	this._name = newValue;
	this.invalidate();
	}
	}

	render() {
	return html`
	Hi <b>${this._name ? this._name : "some body"}</b>
	`;
	}

	connectedCallback() {
	this.invalidate();
	}

	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-name="fancy-pancy"></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-name="Kenneth">Hi someone</my-greeter>
	<br>
	<fancy-greeter></fancy-greeter>
	</body>
	</html>