Polymer 自定义元素数据集在 Firefox 中为空

Question

我的印象是 Firefox "clearing" 自定义元素的 data-* 属性。

请参阅下面的脚本在 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 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
       });
   }
});

Polymer 自定义元素数据集在 Firefox 中为空

Polymer Custom elements dataset is empty in Firefox

web-component

polymer

custom-element