Slick.js无法与Polymer 2.0一起使用

Question

我尝试使用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>

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

Answer 1

在Polymer 2中已不建议使用外部样式表。共享样式的另一种方法是，使用样式模块。这是您想要了解的有关样式模块的更多信息， 请单击此处 。

基本上，要创建样式模块，需要将样式块包装在<dom-module>和<template>元素中，如下所示：

<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库的演示： http ://plnkr.co/edit/PP1uIUICNP4uFZAjZfZb?p=preview