启用了阴影dom的StencilJS组件不会为IE11 / Edge上动态添加的元素生成辅助CSS类

Question

我已经使用模板组件启动器创建了一个新项目。在组件内部，我使用的是外部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选择器重写了阴影dom的所有内容：

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

[一切都在Chrome / Firefox上工作正常，但滑块样式在IE11 / Edge上不起作用，因为Stencil将helper sc-my-component类附加到我在render方法中具有的每个元素并生成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规则时需要识别这些元素？

Answer 1

这不是您的问题的答案，不过，这对您也可能很有趣：

我们目前正在研究同一主题（StencilJS，shadow：true，noUiSlider），并遇到了问题，即滑块的触摸事件在移动设备上的shadowDOM中无法正常工作。我们为此找到了解决方案，并且已经创建了PR（https://github.com/leongersen/noUiSlider/pull/1060）。

Answer 2

我在StencilJS中使用nouislider时也遇到了问题，但设法使其正常工作。

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: [10, 20],
            tooltips: [true, true],
            range: {
                'min': 10,
                'max': 20
            }
        });
        slider.on('change', (value) => this.update.emit(value));
    }

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

对我有用的技巧是'display：block'