Slick.js not working with Polymer 2.0

Question

I try to make my own component with Slick.js library but it seems not working with Polymer 2.0

I have no error in the debug console and nothing appear on the browser

Here's the code :

<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>

I've tried to move .js files imported to the index.html but nothing more. Same for .css files.

Answer 1

Using external stylesheets has been 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 .

Basically, to create a style module, you need to wrap your style block in <dom-module> and <template> elements, like this:

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

When you create the element that will use the styles, import the style module and include in the opening tag of the style 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>

Demo using slick.js library: http://plnkr.co/edit/PP1uIUICNP4uFZAjZfZb?p=preview