Компонент Stencil JS с включенным shadow dom не создает вспомогательные классы CSS для динамически добавляемых элементов в IE11 / Edge - PullRequest
Новая
       44

Компонент Stencil JS с включенным shadow dom не создает вспомогательные классы CSS для динамически добавляемых элементов в IE11 / Edge

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

Я создал новый проект, используя стартер компонента трафарета. Внутри моего компонента я использую внешний JS nouislider , который вводит HTML элементов в мой div (this.slider ref): 

...
componentDidLoad() {
  noUiSlider.create(this.slider, {
    start: [20, 80],
    range: {
      'min': 0,
      'max': 100
    }
  })
}
...

Имею скопировал ползунок CSS в my-component.css и переписал все с помощью селекторов :host для теневого домена: 

:host(.my-component) .noUi-target {
    position: relative;
    direction: ltr
}

Все отлично работает в Chrome / Firefox, но стили ползунка не работают в IE11 / Edge, потому что Stencil добавляет вспомогательный класс sc-my-component к каждому элементу, который есть у меня в методе рендеринга, и генерирует CSS правил следующим образом: 

.my-component.sc-my-component-h .noUi-target.sc-my-component {
  position: relative;
  direction: ltr
}

, но внедренные nouislider дочерние HTML элементы на них нет вспомогательных классов. У меня есть отвратительное исправление для этого случая atm: 

...
componentDidLoad() {
  noUiSlider.create(this.slider, {
    start: [20, 80],
    range: {
      'min': 0,
      'max': 100
    }
  })
  this.slider.querySelectorAll('div').forEach((child)=>{
    child.classList.add('sc-my-component')
  })
}
...

Я добавляю вспомогательные классы после создания ползунка (ползунок генерирует только дочерний элемент divs). Есть ли лучший способ сообщить Stencil, что я внедряю элементы в методы жизненного цикла и что он должен распознавать эти элементы при создании правил CSS?

Ответы [ 2 ]

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

У меня тоже были проблемы с использованием nouislider в Stencil JS, но мне просто удалось заставить его работать.

my-slider.s css

 @import '~nouislider/distribute/nouislider.css';

 :host {
     padding: 50px 30px;
     display: block;
 }

my-slider.tsx 

import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';
import noUiSlider from "nouislider";


@Component({
    tag: 'skim-slider',
    styleUrl: 'skim-slider.scss',
    shadow: true
})
export class SkimSlider {

    @Prop() min!: number;
    @Prop() max!: number;

    private slider: HTMLElement;

    @Event() update: EventEmitter;

    componentDidLoad() {
        const slider = noUiSlider.create(this.slider, {
            start: [this.min, this.max],
            tooltips: [true, true],
            range: {
                'min': this.min,
                'max': this.max
            }
        });
        slider.on('change', (value) => this.update.emit(value));
    }

    render() {
        return (
            <div ref={e => this.slider = e}></div>
        );
    }
}

Уловка, которая сделала это для меня, была 'display: block'

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

Это не ответ на ваш вопрос, тем не менее, это также может быть вам интересно:

В настоящее время мы работаем над тем же topi c (трафарет JS, shadow: true, noUiSlider) и столкнулся с проблемой, что сенсорные события ползунка не работают правильно в shadowDOM на мобильных устройствах. Мы нашли решение для этого и уже создали PR (https://github.com/leongersen/noUiSlider/pull/1060).

...