Implementing a framework inside stencil webcomponent

Question

I am using Stencil.js (typescript) for a project. I need to implement this selectbox .

Here is my code:

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

Please checkout the image with the result. It does show up, but it does nothing when I click on it.

Update 1: I just found out that it does work without the CSS styling.

Answer 1

That select box plugin does not support Shadow DOM. The problem is on this line :

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

Since you're using Shadow DOM, the target of this click event will be your bldc-selectbox element because of Event Retargeting which means this.container.contains(target) will return false and the dropdown will close right after it is displayed.

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

There is an open issue about using it inside a Shadow DOM which hasn't received any updates since February 2019.

The quickest way to make it work is to disable Shadow DOM on your component. Otherwise selectr will need to be updated to support Shadow DOM.