javascript - 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在 Polymer 2 中。共享样式的替代且首选的方式是使用样式模块。如果您想了解有关样式模块的更多信息 click here .

基本上，要创建样式模块，您需要将样式 block 包装在 <dom-module> 中和<template>元素，像这样:

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

当您创建将使用样式的元素时，导入样式模块并将其包含在样式 block 的开始标记中:

<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