在模板webcomponent组件中实现框架

Question

我在一个项目中使用Stencil.js (打字本)。我需要实现这个选择箱。

这是我的代码：

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>
   }
}

请检查图像和结果。它确实出现了，但当我点击它时，它什么也不做。

​

​

更新1:我刚刚发现它不需要CSS样式就能工作。

Answer 1

该复选框插件不支持Shadow DOM。问题是这条线上

if (!this.container.contains(target) && (this.opened || util.hasClass(this.container, "notice"))) {
    this.close();
}

由于您使用的是Shadow，因此这个click事件的click将是您的bldc-selectbox元素，因为有事件重定向，这意味着this.container.contains(target)将返回false，下拉列表将在显示后立即关闭。

在阴影DOM中发生的事件，当被捕获到组件之外时，将主机元素作为目标。

有关于在Shadow DOM中使用它的悬而未决的问题，该DOM自2019年2月以来一直没有收到任何更新。

使其工作的最快方法是禁用组件上的Shadow DOM。否则，需要更新selectr以支持Shadow。