鉄 - リスト内の要素からデータ属性を読み取る

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をループされるポリマーのメソッドを持っています。

私は、彼らの色を設定するために管理することができますが、私は、データ属性を読み出すために管理することはできません。

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')はどちらも期待値を返します）。