如何从外部访问 Webcomponent 的 shadowRoot 中动态加载的内容

如何解决如何从外部访问 Webcomponent 的 shadowRoot 中动态加载的内容

这里的 user-select 是一个预先输入的 webcomponent，它会在输入时动态加载一个列表。 我在这里尝试的是访问动态加载的用户列表。

在页面加载时，用户选择会显示一个文本框（class="type-ahead-input"）。

<user-select id="users">
 #shadow-root (open)
 <div id="web-component-root">
   <div class="type-ahead">
     <input aria-autocomplete="list" placeholder="Search for client" class="type-ahead-input">
   <div>
 </div>
</user-select>

一旦用户开始输入，就会动态添加一个列表 (class="type-ahead-result") 并允许用户进行选择。

<user-select id="users">
 #shadow-root (open)
 <div id="web-component-root">
   <div class="type-ahead">
     <input aria-autocomplete="list" placeholder="Search for client" class="type-ahead-input">
     <div class="type-ahead-result">
       <div role="listbox" style="position:relative,height:1233px,width:100%,top:0,left:0">
          <div id="item-0">
               <li>
                   <span>Test0</span>
               </li>
           </div>
           <div id="item-1">
               <li>
                   <span>Test1</span>
               </li>
           </div>
           <div id="item-2">
               <li>
                   <span>Test2</span>
               </li>
           </div>
           -
           -
           -
           -
       </div>
     </div>
   <div>
 </div>
</user-select>

这就是我正在尝试的。

let clientSelect = document.querySelector("user-select");
clientSelect.shadowRoot.querySelector('.type-ahead-result').addEventListener('click',ev => { 
  console.log(ev)
})

似乎列表是动态添加到 shadow dom 中的，单击事件不起作用。 请让我知道我是否朝着正确的方向前进。