chrome上的聚合物附加生命周期与firefox上的不同

Question

上下文

我在页面中有组件。目前，我正在从组件中触发一个事件，并从页面的附加事件中添加eventListener。

问题

使用firefox时我没有问题，页面在组件之前加载，但在chrome上我有相反的情况，组件在页面之前加载。这导致我在组件触发事件后添加了eventListener。

我可以强制组件在应用后加载吗？

Demo

适用于firefox，但不适用于chrome：

应用

<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>

元素

<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 1

您可以使用页面元素＆＃39; listeners对象设置event listener：

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

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

plunker

或使用带注释的事件监听器：

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

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

plunker