hyperhtml - 访问 hyperHTML 模板中继器中的特定元素

Question

有没有办法访问线图中的特定元素？

render() {
  hyper(this.shadowRoot)`
  <style>${css}</style>
  <container>
    ${this.referenceImages.map(image => wire(image)`
      <cell>
        <inner-cell class="${this.returnClass()}">
          
        </inner-cell>
      </cell>
      `)}
  </container>
  `;
}

我将如何访问 returnClass() 中的节点？

有没有更好的方法通过使用线 ID 和弱引用来做我想做的事？

Answer 1

根据您想要访问它的方式/原因，您可以存储参考并使用<HTMLElement>.querySelector()

render() {
  hyper(this.shadowRoot)`
    <style>${css}</style>
    <container>
      ${this.referenceImages.map(image => {
        const el = wire(image)`
          <cell>
            <inner-cell class="${this.returnClass()}">

            </inner-cell>
          </cell>
        `;
        el.querySelector('inner-cell');
        ...
        return el;
      })}
    </container>
  `;
}