Javascript Slick.js不适用于Polymer 2.0

我尝试使用Slick.js库制作自己的组件，但它似乎不适用于Polymer 2.0

调试控制台中没有错误，浏览器上也没有显示任何内容

代码如下：

<template>

    <link rel="stylesheet" href="../vendors/slick-1.6.0/slick/slick.css">
    <link rel="stylesheet" href="../vendors/slick-1.6.0/slick/slick-theme.css">

    <div id="sliderNews">
        <div><img src="../images/background_baseline.jpeg"></div>
        <div><img src="../images/background_baseline.jpeg"></div>
        <div><img src="../images/background_baseline.jpeg"></div>
        <div><img src="../images/background_baseline.jpeg"></div>
        <div><img src="../images/background_baseline.jpeg"></div>
    </div>

</template>
<script>

    class WorkadvisorModuleNews extends Polymer.Element {

        static get is() { return 'workadvisor-module-news'; }

        static get properties() { return {

            placeholderImg: {
                type: String,
                observer: '_placeholderImgChanged'
            }

        }}

        constructor() {
            super();
        }

        ready() {
            super.ready();
        }

        connectedCallback() {
            super.connectedCallback();
            $(this.$.sliderNews).slick({
                infinite: true,
                arrows: true,
                dots: true,
                slidesToShow: 1
            });
        }
    }

    customElements.define(WorkadvisorModuleNews.is, WorkadvisorModuleNews);

</script>
<script src="../vendors/jquery-3.1.1.min.js"></script>
<script src="../vendors/slick-1.6.0/slick/slick.js"></script>

类WorkadvisorModuleNews扩展了Polymer.Element{
静态get是（）{return'workadvisor模块新闻'；}
静态获取属性（）{return{
占位符IMG：{
类型：字符串，
观察者：“\u占位符imgchanged”
}
}}
构造函数（）{
超级（）；
}
就绪（）{
super.ready（）；
}
connectedCallback（）{
super.connectedCallback（）；
$（此.$.sliderNews）。光滑({
无限：是的，
箭头：是的，
点：是的，
幻灯片放映：1
});
}
}
定义（WorkadvisorModuleNews.is，WorkadvisorModuleNews）；

我尝试将导入到index.html的.js文件移动到index.html，但仅此而已。

---

css文件也是如此

在Polymer 2中已经使用了外部样式表。共享样式的另一种首选方式是使用样式模块。如果您想了解有关样式模块的更多信息，请参阅

基本上，要创建样式模块，需要将样式块包装在

和

元素中，如下所示：

<dom-module id="my-style">
  <template>
    <style>
      <!-- Styles to share go here! -->
    </style>
  </template>
</dom-module>

创建将使用样式的元素时，请导入样式模块并包含在样式块的开始标记中：

<link rel="import" href="my-style.html">
<dom-module id="my-element">
  <template>
    <style include="my-style">
      <!-- Any additional styles go here -->
    </style>
    <!-- The rest of your element template goes here -->
  </template>
</dom-module>

---

使用slick.js库的演示：

使用外部样式表已在Polymer 2中介绍过。共享样式的另一种首选方式是使用样式模块。如果您想了解有关样式模块的更多信息，请参阅

基本上，要创建样式模块，需要将样式块包装在

和

元素中，如下所示：

<dom-module id="my-style">
  <template>
    <style>
      <!-- Styles to share go here! -->
    </style>
  </template>
</dom-module>

创建将使用样式的元素时，请导入样式模块并包含在样式块的开始标记中：

<link rel="import" href="my-style.html">
<dom-module id="my-element">
  <template>
    <style include="my-style">
      <!-- Any additional styles go here -->
    </style>
    <!-- The rest of your element template goes here -->
  </template>
</dom-module>

---

使用slick.js库演示：

[更新]：我在标记之前移动了css文件，标记和结果->上一个/下一个按钮出现，六个按钮带点，但没有出现错误。[更新]：我在标记之前移动了css文件，标记和结果->上一个/下一个按钮出现，六个按钮带点，但没有出现错误。抱歉，但我像你们的演示一样创建了slick-css.html（不是我说的样式css），并导入了slick-css.html，包括了slick-css.html，但始终没有图像出现……问题解决了！这是由于我的组件中的另一个原因，图像位于背景图像后面，所以我看不到它们。对不起，我创建了与您的演示类似的slick-css.html（不是我说的样式css），并导入slick-css.html，包括slick-css.html，但始终没有图像出现…问题解决了！这是由于我的组件中的另一件事，图像在背景图像后面，所以我看不到它们。