Firefoxでポリマーのカスタム要素のデータセットが空です

Question

Firefoxがカスタム要素の属性を「クリア」しているという印象があります。

以下のスクリプトはChromeのネイティブWebコンポーネントサポートで動作しますが、Firefoxでは、クリックイベントハンドラを実行するとデータセットが空になっているようです。

document.addEventListener('DOMContentLoaded', function() { 
    var popups = document.querySelectorAll('iron-image[data-popup]'); 
    for (var i=0; i < popups.length; i++) { 
     var img = popups[i]; 
     console.log(img.dataset.popup); // <--- this works 

     img.addEventListener('click', function(ev) { 
      var app = document.querySelector('sh-app'); 
      app.showPopup(ev.target.dataset.popup); // <-- This fails, dataset is empty 
     }); 
    } 
}); 

側注：私もWebComponentsReadyイベントを試してみましたが、それは何らかの理由ですべてで焼成されません。

誰もがこの問題に遭遇して原因を理解していますか？ これはPolymer（この場合は<iron-image>）、Web Componentsポリフィル、またはFirefoxのその実装のバグですか？

Answer 1

Event retargeting

基本的に、あなたはそれを正規化するPolymer.domを使用してイベントをラップする必要があります。

document.addEventListener('DOMContentLoaded', function() { 
    var popups = document.querySelectorAll('iron-image[data-popup]'); 
    for (var i=0; i < popups.length; i++) { 
     var img = popups[i]; 
     console.log(img.dataset.popup); // <--- this works 

     img.addEventListener('click', function(ev) { 
      var app = document.querySelector('sh-app'); 
      var event = Polymer.dom(ev); // you wrap the event using Polymer.dom 
      app.showPopup(event.localTarget.dataset.popup); // instead of target you should use localTarget 
     }); 
    } 
});