Question

场景：在我的应用程序中，我嵌套了 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中并想在{{中查询类为 titleInput 的元素（在这里是<input> 1}}，我该怎么办？

尝试使用类似Component 2.js的类似语句似乎无效，并返回this.shadowRoot.querySelector('.titleInput');。

Answer 1

我设法解决了这个问题。这是将起到神奇作用的js代码段。

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

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

在这里，就像我在Component 1中一样。因此，this指的是组件1（组件1的类方法，属性和this。$用于选择组件1类模板中具有id的对象，其后跟id。$。elementID），this.$.titleComponent选择 titleComponent ，此语句选择元素shadowRoot.querySelector('.input-wrap')。

嵌套阴影根中的查询元素

1 个答案: