Реализация фреймворка внутри трафаретного веб-компонента - PullRequest
Новая
       15

Реализация фреймворка внутри трафаретного веб-компонента

0 голосов
/ 05 марта 2020

Я использую трафарет. 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>
   }
}

Пожалуйста, проверьте изображение с результатом. Он появляется, но ничего не делает, когда я нажимаю на него.

enter image description here

Обновление 1: я только что обнаружил, что он работает без стиля CSS.

1 Ответ

1 голос
/ 05 марта 2020

Этот плагин select box не поддерживает Shadow DOM. Проблема в этой строке : 

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

Поскольку вы используете Shadow DOM, target этого события click будет вашим элементом bldc-selectbox из-за Event Retargeting , что означает, что this.container.contains(target) вернет false, а раскрывающийся список закроется сразу после его отображения.

События, которые происходят в теневом DOM, имеют целевой элемент в качестве цели , когда перехвачен вне компонента.

Открыт вопрос об использовании его внутри Shadow DOM, который не получал никаких обновлений с февраля 2019 года.

Самый быстрый способ заставить его работать - отключить Shadow DOM на вашем компоненте. В противном случае selectr необходимо будет обновить для поддержки Shadow DOM.

...