Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (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)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement