Referência

Os modelos Markup manipularão a renderização de todos os elementos DOM para você, mas se você realmente precisar acessar o elemento renderizado pelos modelos, poderá usar o atributo ref para fornecer uma chave de identificador que poderá ser usada para capturar os elementos.

html`<button ref="btn">click me</button>`

Múltiplas referências

O atributo ref sempre retorna um array. Portanto, você pode usar a mesma chave para pegar vários itens de uma vez.

const temp = html`
    <li ref="item">item 1</li>
    <li ref="item">item 2</li>
    <li ref="item">item 3</li>
`.render(document.body)

As referências não são criadas até que o modelo seja renderizado. Isso ocorre porque a criação de um modelo simplesmente registra um modelo e é durante a fase de renderização que os elementos são coletados.

Referências de acesso

Para acessar esses elementos de referência, você pode ler a propriedade refs na instância do template.

const temp = html`
    <li ref="item">item 1</li>
    <li ref="item">item 2</li>
    <li ref="item">item 3</li>
`.render(document.body)

console.log(
    temp.refs['item'] // (3) [li, li, li]
)

A propriedade refs retorna um objeto literal com array de elementos codificados pelo valor fornecido nos atributos ref.

Referências aninhadas

Você pode acessar qualquer referência por meio da instância do modelo, incluindo seus modelos filhos.

const items = [
    html`<li ref="item">Buy groceries</li>`,
    html`<li ref="item">Go to gym</li>`,
    html`<li ref="item">Write a blog</li>`,
]

const temp = html`
    <ul ref="list">
        ${items}
    </ul>
`.render(document.body)

console.log(
    temp.refs // {item: Array(3), list: Array(1)}
)

Esse recurso permite que você se concentre em seu modelo principal e trabalhe tudo a partir daí. Isso não significa que você não possa acessar as referências em cada nível de modelo individual. É apenas mais conveniente.

items[0].refs['item'] // [li]
temp.refs['list'] // [ul]
temp.refs['item'] // [li, li, li]

Referências dinâmicas

Todas as referências são dinâmicas e isso significa que conforme as coisas são renderizadas ou desmontadas do modelo, as referências são adicionadas ou removidas.

const items = [
    html`<li ref="item">Buy groceries</li>`,
    html`<li ref="item">Go to gym</li>`,
    html`<li ref="item">Write a blog</li>`,
]

const temp = html`
    <ul ref="list">
        ${items}
    </ul>
`.render(document.body)

console.log(
    temp.refs // {item: Array(3), list: Array(1)}
)

items[0].unmount()
items[2].unmount()

console.log(
    temp.refs // {item: Array(1), list: Array(1)}
)

Por esse motivo, você deve sempre verificar a existência da referência antes de fazer qualquer coisa. Esta seria a indicação se o elemento ainda é renderizado no template ou não.