Polymer 2.0 Custom Event Handling - polymer

Question

So I want to dispatch custom event from the child element.
<dom-module id="layout-dashboard">
<template>
<style></style>
</template>
<script>
class LayoutDashboard extends Polymer.Element {
connectedCallback() {
this.dispatchEvent(new CustomEvent('kick-start', {detail : {}, bubble: true, composed : true}))
}
}
</script>
</dom-module>
And then handle the event from the parent.
<dom-module id="layout-parent">
<template>
<style></style>
<layout-dashboard on-kick-start="handleKick"></layout-dashboard>
</template>
<script>
class LayoutParent extends Polymer.Element {
handleKick(){
console.log("test");
}
}
</script>
</dom-module>
Any idea why handleKick() is not executed?

Answer 1

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 .

Answer 2

Dashes in the event name are fine. Start by fully defining and registering your elements.
Example from the Polymer docs here. Note the is() getter and the customElements.define at the end which registers your element.
<script>
class IconToggle extends Polymer.Element {
static get is() {
return "icon-toggle";
}
constructor() {
super();
}
}
customElements.define(IconToggle.is, IconToggle);
</script>

Answer 3

It's not specified in the Polymer doc, but I suppose it's because the event name contains a dash. If you want to handle this event, I suggest you to add a listener once connect.

Answer 4

Add a listener to the LayoutParent ready function:
ready() {
super.ready();
window.addEventListener('kick-start', (e) => this.handleKick(e));
}
nb; for Polymer 2.0 (as described in #Ofisora's post)