Plantillas

Markup utiliza literales de plantilla etiquetados llamado html para describir el HTML que desea renderizar.

const temp = html`<h1>Hello World</h1>`

html devuelve una instancia HTMLTemplate que contiene métodos y propiedades que puede utilizar para acceder o realizar muchas acciones.

Representación

Hay algunas formas de renderizar una plantilla después de definirla:

• render: toma un HTMLElement al que agregar la plantilla;
• replace: Toma cualquier Nodo u otra instancia HTMLTemplate para reemplazar en DOM;
• insertAfter: toma cualquier nodo u otra instancia de HTMLTemplate para insertar la plantilla después;

render

El método render tomará un ShadowRoot, HTMLElement o DocumentFragment para agregar el contenido.

temp.render(document.body)

El análisis de la plantilla ocurre en el momento del renderizado y solo sucederá una vez. Esto también es válido para otros métodos de renderizado.

Llamar repetidamente al método render con el mismo objetivo solo funcionará una vez. Puedes llamarlo con un objetivo diferente para mover el contenido a un lugar diferente.

temp.render(document.body) // will parse and append to document.body
temp.render(document.body) // will be ignored
temp.render(document.body) // will be ignored
temp.render(document.getElementById('app')) // will move content to #app

replace

El método replace toma cualquier HTMLTemplate o Nodo siempre que no sea un ShadowRoot, HTMLBodyElement, HTMLHeadElement o HTMLHtmlElement para reemplazar en DOM.

temp.replace(document.getElementById('app'))

Similar al método render, solo analizará el contenido una vez.

const loading = html`<p>loading...</p>`

html`${loading}`.render(document.body)

doSomethingAsync().then(() => {
    const done = html`<p>Done</p>`

    done.replace(loading)
})

El método replace es poderoso, especialmente cuando se trabaja con renderizado asincrónico; puede renderizar algo temporalmente como un indicador de carga y luego reemplazarlo más tarde una vez que tenga sus datos. Esto es exactamente lo que hace la utilidad suspense.

insertAfter

El método insertAfter funciona exactamente igual que el método render. La única diferencia es que agrega el contenido de la plantilla después del nodo de destino proporcionado.

temp.insertAfter(document.getElementById('app'))

Otra diferencia es que también puede tomar una instancia HTMLTemplate como destino, lo que permite representar plantillas una tras otra.

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

html`<ul>
    ${items}
</ul>`.render(document.body)

html`<li>Read a book</li>`.insertAfter(items[1])

parentNode

La propiedad parentNode le indicará dónde se representó la plantilla. Devolverá el elemento al que se agregaron los nodos de la plantilla.

mounted

Después de renderizar su plantilla, puede usar la propiedad mounted para verificar si su plantilla se agregó al destino como deseaba.

La propiedad mounted no le indicará si la plantilla está realmente adjunta a un documento. Para eso, puede utilizar el parentNode?.isConnected.

const temp1 = html`one`.render(document.createDocumentFragment())
const temp2 = html`two`.render(document.body)

console.log(
    temp1.mounted, // true
    temp1.parentNode?.isConnected // false
)

console.log(
    temp2.mounted, // true
    temp2.parentNode?.isConnected // true
)

childNodes

El childNodes le brindará una serie de nodos de nivel superior representados por la plantilla.

const temp = html`
    Loose text
    <p>a paragraph</p>
    <button>click me</button>
    ending
`.render(document.body)

console.log(temp.childNodes) // [text, p, text, button, text]

unmount

Para eliminar su plantilla del destino, puede utilizar el método unmount.

temp.unmount()

El unmount debería ser la ÚNICA forma de eliminar la plantilla del DOM. Esto se debe a que también se da de baja de cualquier estado de forma recursiva. Esto significa que incluso cuando anide plantillas, se llamará a unmount para todas ellas.

La manipulación directa del DOM puede tener resultados no deseados.

toString

Convenientemente, puede obtener una representación de cadena de su plantilla en su estado renderizado actual.

const temp = html`
    Loose text
    <p>a paragraph</p>
    <button>click me</button>
    ending
`.render(document.body)

console.log(temp.toString())
/* 
Loose text
<p>a paragraph</p>
<button> click me</button>
ending
 */

Ciclos de vida

Hay métodos adicionales disponibles para fines del ciclo de vida. Puede obtener más información consultando el documento ciclo de vida.