Polymer get element by id from shadow root

Question

I am not able to get an element by id that is in the shadow root. It will return nil. Here is the code. It is written in clojurescript.

    (p/defpolymer :query-component {:imports  ["components/polymer/polymer.html"]
                            :style    ".query-container
                             {margin: 20px;
                             display: inline-block;}"
                            :template [[:div.query-container
                                        [:div
                                         [:h4 {:style "display: inline-block;"} "Current Query"]
                                         [:button {:style    "float: right; margin-top: 10px;"
                                                   :on-click "{{runQuery}}"} "Run Query"]]
                                        [:span "{{query.name}}"]
                                        [:div#inputs]
                                        ;(cljs.reader/read-string "[:input.search-box {:type \"text\", :placeholder \"Country name\"}] ")
                                        ]]
                            :spec     {:publish      {:query {:value ""}}
                                       :runQuery     (fn []
                                                         (this-as this
                                                                  (println (:query (js->clj (.-query this) :keywordize-keys true)))))
                                       :queryChanged (fn []
                                                         (this-as this
                                                                  (let [query (js->clj (.-query this) :keywordize-keys true)
                                                                        inputs (:inputs query)]
                                                                       )
                                                                  (.log js/console (.getElementById js/document "#inputs"))
                                                                  ))}})

As you can see I am trying to get the element by the id "inputs", however, it returns null. https://i.stack.imgur.com/GHMw7.png The div is in there, but I am not able to get it by its id. Is there a reason for this and is there a way to get it by its id? It was my understanding that get elementbyid will search through the shadow roots by apparently not..

EDIT: I found the answer by just fiddling around with the name of the shadow root as a property of an element!

    (p/defpolymer :query-component {:imports  ["components/polymer/polymer.html"]
                            :style    ".query-container
                             {margin: 20px;
                             display: inline-block;}"
                            :template [[:div.query-container
                                        [:div
                                         [:h4 {:style "display: inline-block;"} "Current Query"]
                                         [:button {:style    "float: right; margin-top: 10px;"
                                                   :on-click "{{runQuery}}"} "Run Query"]]
                                        [:span "{{query.name}}"]
                                        [:div#inputs]
                                        ;(cljs.reader/read-string "[:input.search-box {:type \"text\", :placeholder \"Country name\"}] ")
                                        ]]
                            :spec     {:publish      {:query {:value ""}}
                                       :runQuery     (fn []
                                                         (this-as this
                                                                  (println (:query (js->clj (.-query this) :keywordize-keys true)))))
                                       :queryChanged (fn []
                                                         (this-as this
                                                                  (let [query (js->clj (.-query this) :keywordize-keys true)
                                                                        inputs (:inputs query)
                                                                        shadow-root (.-shadowRoot this)
                                                                        input-div (.getElementById shadow-root "inputs")]
                                                                       (set! (.-innerHTML input-div) "<span>Shadow DOM</span>"))))}})

That is the working code. The shadow root is a property on your element and it is name "shadowRoot".

It is a way to define a polymer component in clojurescript. It is defined in another namespace. — kennyjwilli, Jul 30 '14 at 19:33
Fwiw, Polymer puts a reference to any static node with an id in the `$` hash on your element. So `this.$.inputs` should reference the node in question. — Scott Miles, Jul 30 '14 at 19:33

score 1 · Answer 1 · answered Jul 30 '14 at 19:26

1

It was my understanding that getElementById will search through the shadow roots but apparently not.

None of the query methods on document will search through shadow roots, this is part of what makes them shadowy.

An exception to this rule is if you use querySelector[All] and a selector that specifically pierces shadow-roots, i.e. uses /deep/ or ::shadow).

answered Jul 30 '14 at 19:26

Scott Miles

11,025
27
32

For the record, we have a bit of an issue right this moment with QSA and `/deep/` under the polyfill, tracking ticket here: https://github.com/Polymer/ShadowDOM/issues/436 – Scott Miles Jul 30 '14 at 19:32

Polymer get element by id from shadow root

1 Answers1

Linked