Ficogs - HyperHTML setup

by Amens

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/cjs/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cjs/index.min.js"></script>
<div id="app">test</div>

JavaScript

import hyperHTML from 'hyperHTML';	


class MyComponent extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  constructor(...args) {
    super(...args);
    this.html = hyperHTML.bind(this);
  }
  attributeChangedCallback() { this.render(); }
  connectedCallback() { this.render(); }
  render() {
    return this.html`
    <h1>Hello, ${this.getAttribute('name')}</h1>`;
  }
}
 
customElements.define('my-component', MyComponent);
 
document.body.innerHTML =
  '<my-component name="First"></my-component>';
 
const mc = new MyComponent;
mc.setAttribute('name', 'Second');
document.body.appendChild(mc);