Reading data-attribute from element inside iron-list

Question

I create a list of divs using an iron-list like this:

<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>

I have a Polymer method which is called later-on and loops the div.title.

I can then manage to set their color, but I can not manage to read out the 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
});

Why is that?

acoording to [this answer](http://stackoverflow.com/questions/36496583/is-there-a-common-way-to-get-a-polymer-elements-dataset-or-attributes) you can try `console.log(el.dataset.recipient);` — scraaappy, Feb 19 '17 at 17:37
then you have undefined value because item.recipient doesn't exists.. This have to work.. You should be able to call it via `el.getAttribute` or `el.dataset`. If you inspect that element in developer tools do you see value of that attribute? — Kuba Šimonovský, Feb 21 '17 at 09:30

score 1 · Answer 1 · answered Feb 21 '17 at 23:18

If you're inside a Polymer method, avoid using document.querySelector() because it queries the entire document instead of only your element's local DOM, and this function would not be able to query the element's shadow DOM. You should use this.$$('.title') instead.

However, I cannot reproduce the symptom you're seeing in this Codepen (i.e., el.dataset.recipient and el.getAttribute('data-recipient') both return the expected value).

Reading data-attribute from element inside iron-list

1 Answers1

Linked