在模板 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 DOM，因此此click事件的target将是您的bldc-selectbox元素，因为事件重定位意味着this.container.contains(target)将返回false并且下拉列表将在显示后立即关闭。

当在组件外部捕获时，在 shadow DOM 中发生的事件将宿主元素作为目标。

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

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