HydrateElement base class prototyping

[thescientist13]

Overview

Initially started in ProjectEvergreen/greenwood#548, but wcc may provide a nice sandbox for something testing something like this out.

Latest prototype looks something like this

// https://web.dev/declarative-shadow-dom/#hydration
class HydrateElement extends HTMLElement {
  // attach the shadow
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

/*
<style>
  x-foo:not(:defined) > * {
    display: none;
  }
</style>
*/

export { HydrateElement };

Details

Some other ideas / feature that have come up while working on wcc that are worth tracking as part of this

• Use case for render (or hydrate?) methods
• Explore DOM parts
• automatic customElements.define handling / proxying
• Lifecycle's and limitations
• FOUC
• auto shadow root detection / event handling auto re-binding if(this.shadowRoot)
• behavior of open vs closed shadow roots
• HMR support
• Auto Polyfilling?
• Component Name Tags <Header/>
• Self Closing Tags <wcc-header/> / renderToString(<Page/>)
• Potentially relevant twitter discussion on expectations?
• other ideas for writing Custom Elements