鉻上的聚合物附着生命周期與Firefox上不同

Question

語境

我在頁面中有一個組件 。 目前，我正在從組件觸發事件，並從頁面的附加事件添加eventListener。

問題

當使用firefox時，我沒問題， 頁面在組件之前加載，但是在chrome上，我的情況相反， 組件在page之前加載。 這導致我在組件觸發事件之后添加一個eventListener。

我可以在應用程序后強制加載組件嗎？

演示版

適用於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

您可以使用page元素的listeners對象設置事件監聽器 ：

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

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

矮人

或使用帶注釋的事件偵聽器：

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

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

矮人