Your code structure for defining custom-element is wrong. Please read custom element concepts and quick tour of polymer.

The basic structure is like this:

<link rel="import" href="..."> <dom-module id='my-element'> <template> <style></style> </template> <script> class MyElement extends Polymer.Element { static get is() { return "my-element"; } } customElements.define(MyElement.is, MyElement); </script> </dom-module>

The mistakes you have done:

<script></script> and then you wrote your scripts. <script></script> is inside <template> that should be outside <template> and inside <dom-module> . For the custom element lifecycle you need call the superclass method. This is required so Polymer can hook into the element's lifecycle. i.e: connectedCallback() { super.connectedCallback(); // … } You need to register the new element with the browser customElements.define(MyElement.is, MyElement);

I have made a plnkr demo to solve the issue. Please have a look at : http://plnkr.co/edit/p5qvt4cIEJBobrmY8QDg?p=preview .