嵌套影子根中的查询元素

Question

场景：在我的应用程序中，我嵌套了 shadow-roots，我想从外部 获取 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 中并且想要查询一个元素（这里是 <input> 和 class titleInput) 在Component 2.js，我该怎么做？

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

Answer 1

我设法解决了这个问题。这是 js 的片段，可以发挥神奇作用。

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

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

在这里，正如我在Component 1。因此，this 指的是组件 1（组件 1 class 方法、属性和 this.$ 用于组件 1 class 模板内的 select 元素，其 id 后跟 this .$.elementID), this.$.titleComponent selects titleComponent 并且此语句 selects 元素 shadowRoot.querySelector('.input-wrap').

嵌套影子根中的查询元素

Query element in nested shadow root

javascript

polymer

shadow-dom