我无法通过影子根中的id获取元素。它将返回nil。这是代码。它是用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”。
最佳答案
据我了解，getElementById将搜索影子根，但显然不会。
document上的所有查询方法都不会搜索阴影根，这是使它们变得阴影的一部分。
此规则的例外情况是，如果您使用querySelector[All]和专门刺穿阴影根的选择器，即使用/deep/或::shadow。