Seiji Hirao Seiji Hirao - 20 days ago 6
Javascript Question

Polymer attached lifecycle on chrome is different than on firefox

Context



I have a component inside a page. Currently I am firing an event from the component, and adding the eventListener from the page's attached event.

Problem



When using firefox I have no problem, the page loads before the component, but on chrome I have the opposite scenario, the component loads before the page. This results on me adding an eventListener AFTER the component fires the event.

Can I force the component to load after the app?

Demo



Works on firefox, but not on chrome:

App



<link rel="import" href="x-el.html" async>

<dom-module id="x-app">
<template>
<x-el id="el"></x-el>
<div hidden$="[[!detail]]">Event Detail: [[detail]]</div>
</template>
<script>
Polymer({
is: 'x-app',

attached: function(){
this.$.el.addEventListener('foo', () => {
this.set('detail', 'hello')
})
}
});
</script>
</dom-module>


Element



<dom-module id="x-el">
<template>
<div>Hello from <code>x-el</code></div>
</template>
<script>
Polymer({
is: 'x-el',
attached: function() {
this.fire('foo', 'hello');
}
});
</script>
</dom-module>

Answer

You can set the event listener with the page element's listeners object:

// template
<x-el id="el"></x-el>

// script
Polymer({
  is: 'x-page',
  listeners: { 'el.foo': 'onFoo' },
  onFoo: function(e) {...}
});

plunker

Or use an annotated event listener:

// template
<x-el on-foo="onFoo"></x-el>

// script
Polymer({
  is: 'x-page',
  onFoo: function(e) {...}
});

plunker

Comments