在 stencil webcomponent 中实现一个框架答案

【问题标题】：Implementing a framework inside stencil webcomponent在 stencil webcomponent 中实现一个框架
【发布时间】：2020-03-05 12:48:28
【问题描述】：

我正在为一个项目使用 Stencil.js（打字稿）。我需要实现这个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>
   }
}

请检查结果的图像。它确实出现了，但是当我单击它时它什么也没做。

更新 1：我刚刚发现它确实可以在没有 CSS 样式的情况下工作。

【问题讨论】：

标签： javascript typescript import stenciljs

【解决方案1】：

那个选择框插件不支持 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) 将返回 false 并且下拉菜单将在之后关闭显示出来了。

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

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

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

【讨论】：