在 stencil webcomponent 中实现一个框架

Question

我正在为一个项目使用 Stencil.js (typescript)。我需要实现这个 selectbox.

这是我的代码：

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

请查看结果图片。它确实出现了，但是当我点击它时它什么也没做。

更新一：我刚刚发现它在没有 CSS 样式的情况下也能正常工作。

Answer 1

select 盒子插件不支持 Shadow DOM。问题是 on this line:

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

由于您使用的是 Shadow DOM，此 click 事件的 target 将成为您的 bldc-selectbox 元素，因为 Event Retargeting 这意味着 this.container.contains(target) 将 return false 并且下拉列表将在显示后立即关闭。

Events that happen in shadow DOM have the host element as the target, when caught outside of the component.

关于在自 2019 年 2 月以来未收到任何更新的 Shadow DOM 中使用它有 an open issue。

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

在 stencil webcomponent 中实现一个框架

Implementing a framework inside stencil webcomponent

javascript

import

typescript

stenciljs