从iron-list内的元素读取data-attribute

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>

我有一个聚合物方法，它稍后被调用并循环div.title。

然后我可以设法设置它们的颜色，但我无法读取data-attribute：

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

如果您在一个聚合方法中，请避免使用document.querySelector()，因为它查询整个文档，而不仅仅是元素的本地DOM，并且该函数不能查询元素的影子DOM。您应该改用this.$$('.title')。

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