Develop Reference

Using third-party dependencies in polymer (pikadate)

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.

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.

Providing data to Polymer elements

I want to have a single source provide all of my data. A model if you will, and I want my elements to be able to utilize that data, but never change it (one way data-binding). How can I go about this? Should I add the data as a behavior?
I tried doing this in my document:
<script type="text/javascript" src="/data.js"></script> <!-- defines a global object named DATA -->
<my-element data="{{DATA}}"></my-element>
And this inside my-element.html
<dom-module id="my-element">
<template></template>
<script>
Polymer({
is: 'my-element',
properties: {
data: Object
},
ready: function () {
console.log(this.data);
}
});
</script>
</my-element>
but it doesn't seem to work, the value of this.data is literally "{{data}}".
I am looking for a better solution than wrapping the element declaration inside a dom-bind template

To use data binding, you either need to use it inside a polymer element, or inside a dom-bind element. See the explanation here. If you use dom-bind, it's only a case of using the js to set DATA to a property on the dom-bind template element, 'data' maybe, which would be little code.
Essentially, you can't set a global and expect data binding to know about it. You need to either tell dom-bind about it, or the element about it, by setting a property on the element, perhaps using behaviour, as you suggested, or using Mowzer's approach.
An example of using a behaviour would be:
<link rel="import" href="databehaviour.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="an-ele">
<style>
</style>
<template>
<div>{{data.sth}}</div>
</template>
<script>
Polymer({
is: "an-ele",
behaviors: [DataBehaviour]
});
</script>
</dom-module>
With the behaviour being:
<script>
DataBehaviour = {
ready: function() {
this.data = {'sth':'A thing! A glorious thing!'};
}
}
</script>
But in your case, this.data would be set to your DATA global.

Use <iron-meta> [link] or <iron-localstorage>] [link] to share variables between elements or the main document.

Handlers delegation in polymer 1.0

UPDATE: The response and error events no longer bubble. https://github.com/PolymerElements/iron-ajax/releases/tag/v1.0.5
what a pity.
Original question:
I wanted to create custom ajax component based on iron-ajax to add couple of custom headers and handlers. While custom element inheritance is not yet implemented I just added iron-ajax to my-ajax and was going to delegate all api to the iron-ajax, this worked fine with generateRequest.
But when it got to handler methods I noticed that it works without any delegation. There is no on-response handler defined in my-ajax elt but handleResponse is still invoked.
As far as I understand, this happens because Polymer.Base._addFeature._createEventHandler (polymer.html:345)
uses 'this', which is top-level elt, as 'host' for handler methods definitions.
So the question is: is it bug or feature?
The example code:
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<link rel="import" href="https://raw.githubusercontent.com/PolymerElements/iron-ajax/master/iron-ajax.html">
<dom-module id="my-ajax">
<template>
<iron-ajax
id="ironAjax"
url="http://echo.jsontest.com/key/value/otherkey/othervalue"
handle-as="json"
debounce-duration="300"
>
</iron-ajax>
</template>
<script>
Polymer({
is: "my-ajax",
generateRequest: function(){
this.$.ironAjax.generateRequest();
}
});
</script>
</dom-module>
<dom-module id="my-elt">
<template>
<button on-click="buttonClick">Button</button>
<my-ajax
id="myAjax"
on-response="handleResponse">
</my-ajax>
</template>
<script>
Polymer({
is: "my-elt",
buttonClick: function(){
this.$.myAjax.generateRequest();
},
handleResponse: function(event) {
alert('got response');
}
});
</script>
</dom-module>
<my-elt></my-elt>

Most events bubble, so you are just seeing the response event bubble out of my-ajax to the my-elt scope via the handler placed on the my-ajax instance. This happens identically to a click event bubbling from a lower scope to an upper scope.
So answer is: "feature" (of the web platform, more than Polymer itself).

How to import core elements and paper elements in JSFiddle

How can I import core elements and paper elements in JSFiddle.
I'm importing polymer through those statements:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>
How can import for example core-input or paper-input?

Yes from the polymer project site or I guess your cloudflare cdn if you know the location
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
This is just for dev and not production.
If you goto polymer elements then choose your element and click on the button that says Get Element it will give you a popup with an import link.
Also you can get a link for all core or paper elements from here

A good alternative - still a work in progress - is https://ele.io/
Ele (call it “Ellie”) is a streamlined environment for exploring, experimenting with, and sharing reusable custom HTML elements made with Web Components.

To test a simple component written in Polymer 1.0 I use this snippet:
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
//...
}
});
</script>
<proto-element></proto-element>
http://jsfiddle.net/MartyIX/84b5sabw/

Multiple polymer elements in core-component-page

i have two elements, in different html files, how can i show the resume of these elements in the core-component-core?, when i join both files in one html file, looks well, but in different files does not. Only show the "master" element (element-one).
Component 1:
<!--
##### Example:
<element-one name="ruben"></element-one>
#element element-one
#blurb Firts element.
#status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="element-two.html">
<polymer-element name="element-one" attributes="name">
<template> ... </template>
<script>
Polymer( 'element-one', { ... });
</script>
</polymer-element>
Component 2:
<!--
##### Example:
<element-two subname="cid"></element-two>
#element element-two
#blurb Second element.
#status alpha
-->
<polymer-element name="element-two" attributes="subname">
<template> ... </template>
<script>
Polymer( 'element-two', { ... });
</script>
</polymer-element>

The component-page link on https://github.com/Polymer/core-component-page doesn't point anywhere meaningful, so it's ironically difficult to view the docs for the thing that generates the docs. (I've filed a bug about that.)
But if you look at the source, you'll see two attributes on <core-component-page>. sources takes an array of .html files corresponding to each element you want documented.
An example of this is the index.html source for <google-map>, which renders as this component page.