Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <h1>DONE</h1>
  <say-hello who="World"></say-hello>
<script id="jsbin-javascript">
    class SayHello extends HTMLElement {

      constructor() {
        super();
        this.innerHTML="EMPTY";
        console.log("SayHello is constructed");
      }

      static get observedAttributes() {
        return ["who"];
      }

      connectedCallback() {
        this.innerText = "Hello " + this.getAttribute('who') + "!";
        console.log("SayHello is connected to DOM")
      }

      disconnectedCallback() {
        console.log("SayHello is disconnected");
      }

      attributesChanged(name, oldValue, newValue) {
        if (name == "who") this.innerText = "Hello " + newValue + "!";
        console.log("SayHello attribute " + name + " changed from " + oldValue +" to " + newValue);
      }
    }
    customElements.define('say-hello', SayHello);


</script>


<script id="jsbin-source-javascript" type="text/javascript">    class SayHello extends HTMLElement {

      constructor() {
        super();
        this.innerHTML="EMPTY";
        console.log("SayHello is constructed");
      }

      static get observedAttributes() {
        return ["who"];
      }

      connectedCallback() {
        this.innerText = "Hello " + this.getAttribute('who') + "!";
        console.log("SayHello is connected to DOM")
      }

      disconnectedCallback() {
        console.log("SayHello is disconnected");
      }

      attributesChanged(name, oldValue, newValue) {
        if (name == "who") this.innerText = "Hello " + newValue + "!";
        console.log("SayHello attribute " + name + " changed from " + oldValue +" to " + newValue);
      }
    }
    customElements.define('say-hello', SayHello);

</script></body>
</html>