4

I'm creating a polymer datepicker using pikaday. Sadly it seems like I got something wrong.

I'd like to import pikaday.js and pikaday.css the right way.

At first I had a simple script-tag below my closing dom-module-tag, like

</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
  Polymer({
    //....

This way, the datepicker was created as expected. But after reading this SO-Thread I was under the impression I was supposed to import the js-file like this:

 <link rel="import" href="../../paper-input/paper-input-behavior.html">
 <link rel="import" href="../../paper-input/paper-input-error.html">
 <link rel="import" href="../../pikaday/pikaday.js">
 //more imports....

But after "fixing" my import, the file pikaday.js seems not to be visible from inside my component:

Uncaught ReferenceError: Pikaday is not defined

Furthermore I'm confused about using external css. After reading this guide it seems like I was supposed to copy & paste the contents of the provided css-file into a my-datepicker-style.html and to import it into my template like this: 

<dom-module id="my-datepicker">
  <template>
    <style include="my-datepicker-style"></style>
    <style>
      :host {
        //more css

I'm confused about the need to copy & paste existing code.

Community
  • 1
  • 1
samjaf
  • 1,033
  • 1
  • 9
  • 19

1 Answers1

6

Until ES6 imports are more common, you need some kind of workaround for referencing dependencies.

The problem with <script> tag is that when it appears multiple times, it will be processed multiple times. This is not true for <link rel="import">. Same href will be processed only once.

You cannot, however, import javascript directly. The trick is to create pikaday-import.html file with the script reference

<script src="../../pikaday/pikaday.js"></script>

You then import that in your element's html

<link rel="import" href="pikaday-import.html" />
<dom-module id="my-datepicker"></dom-module>

This is the technique for example the <marked-element> uses.

This way instances of <my-datepicker> load pickaday only once. Unfortunately, if there are other components which reference it, you could end up loading the dependency multiple times.

Tomasz Pluskiewicz
  • 3,622
  • 1
  • 19
  • 42