聚合物从影子根通过id获取元素 [英] Polymer get element by id from shadow root

问题描述

我无法通过影子根中的id获取元素。它将返回nil。这是代码。

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

如您所见，我正在尝试通过id inputs获取元素，但是它返回null。
http://i.stack.imgur.com/GHMw7.png
div在其中，但我无法通过其ID获取它。是否有这个原因，是否有办法通过其ID获取它？据我了解，get elementbyid显然不会搜索影子根。

As you can see I am trying to get the element by the id "inputs", however, it returns null. http://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..

编辑：
我只是在摆弄名字而找到了答案阴影根作为元素的属性！

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

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

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

推荐答案

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

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

文档上的任何查询方法都不会搜索影子根，这是使它们成为 shadowy 的一部分。

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

此规则的一个例外是，如果您使用 querySelector [All] 以及专门刺穿阴影根的选择器，即使用 / deep / 或 :: shadow ）。

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).

这篇关于聚合物从影子根通过id获取元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！