appendChild won't work with Polymer 1.0 "shady DOM" #45
Description
See this discussion.
Bottom line: for performance reasons, Polymer 1.0 gives the option of not polyfilling the full shadow DOM spec by overwriting DOM API's like appendChild. For at least some Polymer elements, we need to execute slightly different code to ensure that things render correctly, allowing the element to be notified when its content has changed. I played with this a bit in my local copy of freactive, and was able to make it work by adding a register-append-child function in freactive.dom:
(def ^:private append-child-fns
(atom {:default (fn [parent node] (.appendChild parent node))}))
(defn register-append-child
[tag append-child-fn]
(swap! append-child-fns assoc (.toUpperCase (name tag)) append-child-fn))
(defn- do-append-or-insert-child [parent node before]
(if before
(.insertBefore parent node before)
(if-let [append-child-fn (@append-child-fns (.-tagName parent))]
(append-child-fn parent node)
((@append-child-fns :default) parent node))))And then calling it like this:
(dom/register-append-child :paper-button
(fn [parent node]
(.appendChild (js/Polymer.dom parent) node)))The design maybe needs some more thought. Seems onerous to have to register for every element, maybe makes more sense to provide a predicate function. Probably could streamline performance a bit as well. I assume insertBefore has the same issue, but haven't tested.