Accessing specific element in hyperHTML template repeater

Question

Is there a way to access a specific element in a wire map?

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

How would I access the node in returnClass()?

Is there a better way to do what I want by using wire ids and weak references?

Answer 1

Depending on how / why you want to access it, you could store a reference and use <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>
  `;
}