嵌套阴影根中的查询元素

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中并想查询<input>中的元素（这里是类[[titleInput

的Component 2.js），我该怎么办？尝试使用类似this.shadowRoot.querySelector('.titleInput');之类的语句似乎无效，并返回null。

场景：在我的应用程序中，我嵌套了阴影根，我想从外部阴影根中获取内部阴影根中的一个元素。我真正的意思是考虑这个场景。

Answer 1

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