Custom Elements with Vue Reactivity

export default ({ name, setup, props }) => {
  customElements.define(
    name,
    class extends HTMLElement {
      static get observedAttributes() {
        // Return a list of observed attribute names
      }

      constructor() {
        // 1. Scaffold reactive props
        // 2. Scaffold slots as reactive object
        // 3. Apply effect to render the template + run hooks
      }

      connectedCallback() {
        // 1. Run beforeMount hook
        // 2. Render template + invoke setup()
        // 3. Run mounted hook
        // 4. Bind template slots to reactive object
        // 5. Validate props
      }

      disconnectedCallback() {
        // Run unmounted hook
      }

      attributeChangedCallback() {
        // Parse, validate and update reactive props
      }
    }
  );
}