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

使用外部样式表已 deprecated in Polymer 2. The alternative and preferred way to share styles is with style modules.If you want to learn more about style modules click here。

基本上，要创建样式模块，您需要将样式块包装在 <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

Slick.js 不适用于 Polymer 2.0

Slick.js not working with Polymer 2.0

javascript

ecmascript-6

polymer

slick.js