custom element Reflecting properties to attributes

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script>
    class AppDrawer extends HTMLElement {
      constructor() {
        super(); // always call super() first in the ctor.
        this.addEventListener('click', this.setFoo);
      }
      get foo() {
        return this.hasAttribute('foo');
      }

      set foo(val) {
        if (val) {
          this.setAttribute('foo','');
        } else {
          this.removeAttribute('foo');
        }
      }
      
      setFoo() {
        this.foo = !this.foo;
        console.log(this);
      }
    }

    customElements.define('app-drawer', AppDrawer);
  </script>

  <h1>custom element</h1>
  <h2>Reflecting properties to attributes</h2>

  <pre>To see the detail, look at the console</pre>
  <app-drawer>Click here to change property</button>
</body>

</html>