Компонент StencilJS с включенным теневым доминированием не генерирует вспомогательные классы CSS для динамически добавляемых элементов в IE11 / Edge.

Я создал новый проект, используя стартер компонентов трафарета. Внутри моего компонента я использую внешний 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 не имеют на себе вспомогательных классов. У меня есть некрасивое исправление для этого случая банкомата:

...
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?


ionic-framework web-component stenciljs internet-explorer-11 shadow-dom
person htmn    schedule 03.03.2020    source источник
comment
На странице поддержки браузера Stencil кажется, что нам нужны полифиллы для поддержки Shadow Dom в IE. и Edge. Вы можете обратиться к этой странице о добавлении полифиллов для IE 11 и Custom Elements v1 заполните полифайл для Edge, чтобы посмотреть, поможет ли это.   -  person Yu Zhou    schedule 04.03.2020

Ответы (2)


arrow_upward
0
arrow_downward

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

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

person smk90    schedule 10.03.2020
comment
Большое спасибо за пиар! У меня тоже была проблема с этим, поэтому на данный момент я использовал родной <input type="range" /> и сделал его совместимым для всех браузеров. который поддерживает трафарет. Подходит для моего случая, мне нужен был только простой ползунок со значениями min, max и step. - person htmn; 10.03.2020

arrow_upward
0
arrow_downward

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

my-slider.scss

 @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'

person Gerard van der Stelt    schedule 16.03.2020
comment
Я не понимаю, как display: block; решает проблему добавления имени класса области видимости к динамически создаваемым элементам ... - person kraftwer1; 07.09.2020