Firefox에서 폴리머 맞춤 구성 요소 데이터 세트가 비어 있습니다.

Question

Firefox가 사용자 정의 요소에 대해 data-* 속성을 "삭제"하고 있다는 인상을 받았습니다.

아래 스크립트는 기본 웹 구성 요소를 지원하는 Chrome에서 작동하지만 Firefox에서는 일단 내 click 이벤트 핸들러가 실행되면 데이터 세트가 비어있는 것처럼 보입니다.

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 polyfills 또는 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 
     }); 
    } 
});