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

[thescientist13]

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]

It seems that there are open discussions around standards and conventions for SSR of native HTMLElement so puppeteer may need to be the fallback if only using HTMLElement, but it certainly open us up to making our own still if we want to! 🤔

[thescientist13]

Interestingly, started working on a new project that may / could be a home for something like this? I guess not sure if something like this should live on its own, or, at the framework layer? I think I might use wcc as a way to prototype this idea in a more sandboxed environment initially.

[thescientist13]

duplicated, let's use #1311 going forward