Nouislider不在Web组件 - 聚合物3(litelement)中工作

Question

我想知道如何在诸如polymer 3/litelemt之类的网络组件中实现nouislider，我尝试了以下代码，该代码符合nouislider.create is not function的错误，服务器以响应为non-JavaScript MIME type of "text/css"。

import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
import * as  noUiSlider  from 'https://unpkg.com/nouislider/distribute/nouislider.min.js'
export class Filters extends LitElement { 
  constructor() {
    super();
   this.slider();
  }
  slider(){
    var range = document.getElementById('range');
    noUiSlider.create(range, {
        start: [ 20, 80 ], // Handle start position
        step: 10, // Slider moves in increments of '10'
        margin: 20, // Handles must be more than '20' apart
        connect: true, // Display a colored bar between the handles
        direction: 'rtl', // Put '0' at the bottom of the slider
        orientation: 'vertical', // Orient the slider vertically
        behaviour: 'tap-drag', // Move handle on tap, bar is draggable
        range: { // Slider can select '0' to '100'
            'min': 0,
            'max': 100
        },
        pips: { // Show a scale with the slider
            mode: 'steps',
            density: 2
        }
    });
    var valueInput = document.getElementById('value-input'),
    valueSpan = document.getElementById('value-span');
    // When the slider value changes, update the input and span
    range.noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            valueInput.value = values[handle];
        } else {
            valueSpan.innerHTML = values[handle];
        }
    });
    // When the input changes, set the slider value
    valueInput.addEventListener('change', function(){
        range.noUiSlider.set([null, this.value]);
    });
  }
  render() {
    return html` 
     <div id="range"></div>   
    
    `;

Answer 1

由于html的渲染时间，投掷EN错误。因此，您可以使用如下；*还检查Shadow DOM this.shadowRoot.getElementById('range')中的参考元素而不是document.getElementById

演示

import { LitElement, html } from '@polymer/lit-element'; 
import {afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import * as  noUiSlider  from 'https://unpkg.com/nouislider/distribute/nouislider.min.js'
class MyFilters extends LitElement { 
  constructor() {
    super();
     afterNextRender(this, ()=>{ 
          this.slider();
    })
  }
  slider(){
     var range = this.shadowRoot.getElementById('range');
     noUiSlider.create(range, {
        start: [ 20, 80 ], // Handle start position
        step: 10, // Slider moves in increments of '10'
        margin: 20, // Handles must be more than '20' apart
        connect: true, // Display a colored bar between the handles
        direction: 'rtl', // Put '0' at the bottom of the slider
        orientation: 'vertical', // Orient the slider vertically
        behaviour: 'tap-drag', // Move handle on tap, bar is draggable
        range: { // Slider can select '0' to '100'
            'min': 0,
            'max': 100
        },
        pips: { // Show a scale with the slider
            mode: 'steps',
            density: 2
        }
    });
    var valueInput = this.shadowRoot.getElementById('value-input'),
    valueSpan = this.shadowRoot.getElementById('value-span');
    // When the slider value changes, update the input and span
    range.noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            valueInput.value = values[handle];
        } else {
            valueSpan.innerHTML = values[handle];
        }
    });
    // When the input changes, set the slider value
    valueInput.addEventListener('change', function(){
        range.noUiSlider.set([null, this.value]);
    });
  }
  render() {
    return html` 
     <div id="range">
     <span id="value-span"></span>
     <input id="value-input"/>  
     </div> 
    `;
  }
}
customElements.define('my-filters', MyFilters);