webcomponent

(ns simple-reagent-webcomponent (:require [reagent.core :as re]))

(defn webcomponent! [name view-component]
  (let [;; defines the constructor function, which is the "class" object used by the customElements api
        component (fn component [] (let [e
                                         ;; this is the equivalent of the call to "super"
                                         (js/Reflect.construct js/HTMLElement #js [] component)]
                           (js/console.log (str name ": Constructed!"))
                           (set! (.-shadow e) (.attachShadow e #js {:mode "open"}))
                           e))]
    (set! (.-prototype component)
          ;; establishes prototype hierarchy
          (js/Object.create (.-prototype js/HTMLElement)
                            #js {:connectedCallback
                                 #js {:configurable true
                                      :value        (fn []
                                                      (this-as this
                                                        ;; attaches the reagent process to the shadow dom
                                                        (re/render [view-component] (.-shadow this))
                                                        (js/console.log (str name ": Connected! ") this)))}}))

    ;;finally, defines the component with these values
    (js/window.customElements.define name component)