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得到它。这有什么理由，有没有办法通过它的身份得到它？我的理解是，获取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）。

Polymer通过id从shadow root获取元素

1 个答案: