嵌套影子根中的查询元素答案

【问题标题】：Query element in nested shadow root嵌套影子根中的查询元素
【发布时间】：2019-10-09 08:07:05
【问题描述】：

场景：在我的应用程序中，我嵌套了 shadow-roots，我想从外部 shadow-root 获取 inner shadow-root 中的元素。

我的真正意思是考虑这个场景。

<Component 1 id="headerComponent">
#shadow-root // outer shadow-root.
  <div class="header"></div> // element in outer shadow-root.
  #shadow-root // inner shadow-root.
    <Component 2 id="titleComponent"> // We have component 2 inside the shadow root of component 1.
       <input class="titleInput"> // element inside inner shadow-root.

现在，如果我在Component 1.js，想查询Component 1.js中的任何元素，我会写这段代码this.shadowRoot.querySelector('.header');，效果很好。

但是，如果我在Component 1.js 中并想在Component 2.js 中查询一个元素（这里是<input> 类titleInput），怎么能我做吗？

尝试类似this.shadowRoot.querySelector('.titleInput'); 的语句似乎不起作用并返回null。

【问题讨论】：

标签： javascript polymer shadow-dom

【解决方案1】：

我设法解决了这个问题。这是 js 的 sn-p 将发挥魔力。

this.$.titleComponent.shadowRoot.querySelector('.input-wrap');

对于那些不熟悉聚合物架构的人。

在这里，我在Component 1。所以，this 指的是组件 1（组件 1 类方法、属性和 this.$ 用于选择组件 1 类模板中的元素，其 id 后跟 this.$.elementID），this.$.titleComponent 选择 titleComponent 并且此语句选择元素shadowRoot.querySelector('.input-wrap')。

【讨论】：