Franklin DOM vs Reactive Frameworks

[auniverseaway]

Context

We know Franklin provides server-side DOM that we should probably try to leverage as much as possible.

We know that using state and a reactive framework for SPA-like experiences makes our world much easier and maintainable.

I'm wondering...

I'm starting to wonder if we use Web Components as the layer to bridge this gap. In theory, this would work better than dangerouslySetInnerHTML.

The goal would be pretty simple: can we marry Franklin server-side DOM with a reactive framework and achieve the best of both worlds. You can read about Web Components in Preact here.

Thoughts?

[auniverseaway]

This is definitely not complete, but there is a way to pass full rendered DOM without Preact needing to do much work.

import { html, render } from '../../deps/htm-preact.js';

customElements.define('con-card',
  class extends HTMLElement {
    constructor() {
      super();
    }

    set dom(el) {
      this.el = el;
    }

    connectedCallback() {
      this.innerHTML = this.el.outerHTML;
    }
  }
);

function Wrapper({ el }) {
  return html`<div class=hello-wrapper>
    <con-card dom=${el}></con-card>
  </div>`;
}

export default function init(el) {
  const h2 = el.querySelector('h2');
  render(html`<${Wrapper} el=${h2} />`, el);
}