Árbitro

Las plantillas Markup manejarán la representación de todos los elementos DOM por usted, pero si realmente necesita acceder al elemento representado por las plantillas, puede usar el atributo ref para proporcionar una clave de identificador que luego puede usar para capturar los elementos.

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

Múltiples referencias

El atributo ref siempre devuelve una matriz. Por lo tanto, puedes usar la misma clave para tomar varios elementos a la 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)

Las referencias no se crean hasta que se renderiza la plantilla. Esto se debe a que la creación de una plantilla simplemente registra una plantilla y es durante la fase de renderizado que se recopilan los elementos.

Referencias de acceso

Para acceder a estos elementos de referencia, puede leer la propiedad refs en la instancia de la plantilla.

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]
)

La propiedad refs devuelve un objeto literal con una matriz de elementos codificados por el valor que proporcionó en los atributos ref.

Referencias anidadas

Puede acceder a cualquier referencia a través de la instancia de la plantilla, incluidas sus plantillas secundarias.

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)}
)

Esta capacidad le permite concentrarse en su plantilla principal y trabajar todo desde allí. Esto no significa que no pueda acceder a las referencias en cada nivel de plantilla individual. Es simplemente más conveniente.

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

Referencias dinámicas

Todas las referencias son dinámicas y esto significa que a medida que las cosas se procesan o se desmontan de la plantilla, se agregan o eliminan referencias.

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 este motivo, siempre debes comprobar que la referencia esté ahí antes de hacer cualquier cosa. Esta sería la indicación de si el elemento todavía se representa en la plantilla o no.