场景: 在我的应用程序中,我嵌套了shadow-roots,并且我想从外部shadow-root获取内部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>
中的一个元素(这里是 Component 2.js
,带有类 titleInput) ,我该怎么办?
尝试类似的语句 this.shadowRoot.querySelector('.titleInput');
似乎不起作用并返回 null
.
最佳答案
我设法解决了这个问题。 这是发挥神奇作用的 js 片段。
this.$.titleComponent.shadowRoot.querySelector('.input-wrap');
适合那些不熟悉 polymer 架构的人。
这里,就像我在组件 1
中一样。
因此,this
引用组件 1(组件 1 类方法、属性和 this.$ 用于选择组件 1 类模板中 id 后跟 this.$.elementID 的元素), this.$.titleComponent
选择 titleComponent,此语句选择元素 shadowRoot.querySelector('.input-wrap')
。
关于javascript - 嵌套影子根中的查询元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58299663/