如何在聚合物3.0中获取多态重复元素？

Question

我有以下代码：

<dom-repeat id="template" items="{{chats}}">
    <template>
      <template is="dom-if" if="[[item.opened]]">
        <section id$="msg-[[index]]"></section>
      </template>
    </template>
</dom-repeat>

如何使用id=msg-3访问部分，并在呈现时将scrollTop设置为999？

我知道，在聚合物1，最佳做法是绑定到附加和等待一个多向重复事件，但这不再适用于聚合物3。

Answer 1

如果您知道索引号，您可以访问元素；

let el = this.shadowRoot.querySelector('#msg-'+<index>);

请记住，如果由于使用dom-if筛选器而没有呈现项，则无法访问此元素。

编辑

以便在所选项目的顶部显示；

let screenPosition = el.getBoundingClientRect();
window.scrollTo(screenPosition);

演示