Javascript 在stencil webcomponent中实现一个框架

我正在为一个项目使用Stencil.js（typescript）。我需要实现这一点

这是我的密码：

import { Component, h, JSX, Prop, Element } from '@stencil/core';
import Selectr from 'mobius1-selectr';

@Component({
   tag: 'bldc-selectbox',
   styleUrl: 'bldc-selectbox.scss',
   shadow: true
})
export class BldcSelectbox {

   @Element() el: HTMLElement;


   componentDidLoad() {
            //init selectbox 
            new Selectr(this.el.shadowRoot.querySelector('#mySelect') as HTMLOptionElement, {// document.getElementById('mySelect'), {
               searchable: true,
               width: 300
            });
   }  



   render(): JSX.Element {
      return <div>
         <section>
            <select id="mySelect">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
            </select>
         </section>

      </div>
   }
}

从'@stencil/core'导入{Component，h，JSX，Prop，Element}；
从“mobius1选择器”导入选择器；
@组成部分({
标签：“bldc选择框”，
styleUrl:'bldc selectbox.scss'，
影子：对
})
导出类BldcSelectbox{
@Element（）el:HTMLElement；
componentDidLoad（）{
//初始化选择框
新选择器（this.el.shadowRoot.querySelector（'#mySelect'）作为HTMLOptionElement，{//document.getElementById（'mySelect'）{
可搜索：正确，
宽度：300
});
}  
render（）：JSX.Element{
返回
1.
2.
3.
}
}

请用结果签出图像。它确实会显示，但当我单击它时它什么也不做

更新1：

---

我刚刚发现它在没有CSS样式的情况下也能工作。

选择框插件不支持阴影DOM。问题是：

if（！this.container.contains（target）&&（this.opened | util.hasClass（this.container，“notice”））{
这个。关闭（）；
}

由于您使用的是Shadow DOM，因此此

单击事件的
target
将是您的
bldc selectbox
元素，因为这意味着
this.container.contains（target）
将返回
false
，下拉列表将在显示后立即关闭

在影子DOM中发生的事件在组件外部捕获时，以宿主元素作为目标

关于在自2019年2月以来没有收到任何更新的阴影DOM中使用它

使其工作的最快方法是在组件上禁用阴影DOM。否则，
selector
将需要更新以支持阴影DOM