HydrateElement (SSR+Hydration for native HTMLElement / Web Components)

[thescientist13]

Overview

(Discussed in #548)

^{Originally posted by thescientist13 April 11, 2021}
Have been toying around with the idea of a "hydratable" Web Component base class that could be leveraged by Greenwood to reduce the cost of shipping Web Component JS to the client, as is unfortunate in that WCs do require JS to work.

Something like

class MyCounter extends HydrateElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: "open" }); // TODO only works when mode is "open"
  }

  async connectedCallback() {
    await this.rehydrate(this, async () => {
      this.count = parseInt(this.querySelector('#count').textContent, 10);
    });
    
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.shadowRoot.getElementById("inc").onclick = () => this.inc();
    this.shadowRoot.getElementById("dec").onclick = () => this.dec();
    this.update();
  }

  inc() {
    this.update(++this.count);
  }

  dec() {
    this.update(--this.count);
  }

  update(count) {
    this.shadowRoot.getElementById("count").innerHTML = count || this.count;
  }
}

[thescientist13]

This might work well in conjunction with wcc and with #880