javascript - 从 Iron-List 内的元素读取数据属性

Question

我使用 iron-list 创建一个 div 列表，如下所示:

<iron-list items="[[chats]]" as="item" style="height:500px;">
    <template>
        <div class="item title" data-recipient$="[[item.recipient]]">
            <iron-icon class="big" src="../icons/games.svg"></iron-icon>
        </div>
    </template>
</iron-list>

我有一个稍后调用的 Polymer 方法并循环 div.title。

然后我可以设法设置它们的颜色，但我无法读出数据属性:

var elems = document.querySelectorAll(".title");
[].forEach.call(elems, function(el) {
    el.style.color = "red"; // works
    console.log(el.getAttribute("data-recipient")); // prints out null
});

这是为什么？

Answer 1

如果您使用 Polymer 方法，请避免使用 document.querySelector() 因为它查询整个文档而不是仅查询元素的本地 DOM，并且此函数将无法查询元素的影子 DOM。您应该使用 this.$$('.title')相反。

但是，我无法重现您在 Codepen 中看到的症状(即 el.dataset.recipient 和 el.getAttribute('data-recipient') 均返回预期值)。