in.clj

(dynamic-template some-html
  :#id (content :foo))

;; becomes (pseudo-code)

(-> js/document .-body ... #_(traversal to the node) (.appendChild (node (:foo model))))

;; and the template content of #id is stripped out server-side

Here is how I see the code playing out.

<div id="id">
  <h3>test title</h3>
  <span>test<span>
</div>

;;takes [html, root, transforms]
(dynamic-template some-html (.body js/document)
  [:#id :span] (content :foo)
  [:#id :h3] (class :cool :bar))

;;becomes we turn locs into index keys
(let [html-frag (-> (.createDocumentFragment js/document)
                    (append-elements [(create-element "div") {}  [(create-element "h3" {} ["test title"]) 
                                                          (create-element "span" {} ["test"])])]
  (fn [data]
    (when (not-attached html-frag) (.append root html-frag))
    ;;based on what the traversal function returns a procol ITransform (replace,disgard, 
    (replace (traversal-func root loc1)  (fetch-in-path [data :foo])
    (replace (traversal-func root loc2)  (fetch-in-path [data :bar]))))  

I am still struggling how something like append is going to work given if the template is called again the locs might be invalid. Our plan/traversal is static but the dom is changing with the app state. It feels like I have use a consistent input (static fragment) with app data to not have the state of the dom affect the transforms.