Looking to implement a listener event on a Polymer custom element using Polymer-gestures.
Here is a snippet of my code:
- my-custom-element.html
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="my-custom-element" attributes="width height color">
<template>
<canvas id="canvas" width="{{width}}" height="{{height}}" style="background-color: {{color}}" touch-action="none"></canvas>
</template>
<script>
Polymer({
width: '',
height: '',
color: ''
});
</script>
</polymer-element>
- my-custom-parent-element.html
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-gestures/polymer-gestures.html">
<polymer-element name="my-custom-parent-element">
<template>
<my-custom-element width="300px" height="200px" color="yellow"></my-custom-element>
</template>
<script>
Polymer({
ready: function() {
this.myCustomElement = this.shadowRoot.querySelector('my-custom-element');
var events = [
// base events
'down',
'up',
'trackstart',
'track',
'trackend',
'tap',
'hold',
'holdpulse',
'release'
];
events.forEach(function(en) {
PolymerGestures.addEventListener(this.myCustomElement, en, function (inEvent) {
...
});
}
});
</script>
</polymer-element>
An issue arises with the following error message:
Uncaught TypeError: Cannot read property '_pgListeners' of undefined
During debugging in my-custom-parent-element.html, I noticed that the value of the myCustomElement variable is null when adding an event listener. How can I successfully add the listener to the myCustomElement variable?