Polymer 通过影子根的 id 获取元素

Question

我无法通过 id 获取影子根中的元素。它将返回零。这是代码。它是用 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"))
                                                                  ))}})

如您所见，我试图通过 id “inputs” 获取元素，但是，它返回 null。 http://i.stack.imgur.com/GHMw7.png div 在那里，但我无法通过它的 id 得到它。这有什么原因吗？有没有办法通过它的 id 来获取它？据我了解，get elementbyid 显然不会搜索影子根。

编辑： 我只是通过将影子根的名称作为元素的属性摆弄来找到答案！

    (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>"))))}})

这是工作代码。影子根是元素上的一个属性，名称为“shadowRoot”。

Answer 1

据我了解，getElementById 会搜索影子根，但显然不会。

document 上的任何查询方法都不会搜索影子根，这是它们影子的部分原因。

此规则的一个例外是，如果您使用 querySelector[All] 和专门穿透影子根的选择器，即使用 /deep/ 或 ::shadow)。