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，并且此函数将无法查询元素＆＃39; s shadow DOM。您应该使用this.$$('.title')代替。

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

从铁列表中的元素读取数据属性

1 个答案: