Modelagem Markup - Criar, renderizar, substituir e aninhar modelos

Modelagem

Markup usa literais de modelo marcados chamados html para descrever o HTML que você deseja renderizar.

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

O html retorna uma instância HTMLTemplate contendo métodos e propriedades que você pode usar para acessar ou executar muitas ações.

Renderização

Existem algumas maneiras de renderizar um modelo depois de defini-lo:

render: utiliza um HTMLElement para anexar o modelo;
replace: Leva qualquer Node ou outra instância HTMLTemplate para substituir no DOM;
insertAfter: Pega qualquer Node ou outra instância HTMLTemplate para inserir o template depois;

render

O método render usará ShadowRoot, HTMLElement ou DocumentFragment para anexar o conteúdo.

javascript
temp.render(document.body)

A análise do modelo acontece no momento da renderização e só acontecerá uma vez. Isto também se aplica a outros métodos de renderização.

Chamar o método render com o mesmo destino repetidamente funcionará apenas uma vez. Você pode chamá-lo com um alvo diferente para mover o conteúdo para um local diferente.

javascript
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

O método replace utiliza qualquer HTMLTemplate ou Node, desde que não seja um ShadowRoot, HTMLBodyElement, HTMLHeadElement ou HTMLHtmlElement para substituir no DOM.

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

Semelhante ao método render, ele analisará o conteúdo apenas uma vez.

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

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

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

    done.replace(loading)
})

O método replace é poderoso, especialmente ao trabalhar com renderização assíncrona, você pode renderizar algo temporariamente como um indicador de carregamento e substituí-lo mais tarde, assim que tiver seus dados. Isso é exatamente o que o utilitário suspense faz.

insertAfter

O método insertAfter funciona exatamente como o método render. A única diferença é que ele adiciona o conteúdo do modelo após o nó de destino fornecido.

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

Outra diferença é que ele também pode levar uma instância HTMLTemplate como alvo, permitindo renderizar templates um após o outro.

typescript
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

A propriedade parentNode informará onde o modelo foi renderizado. Ele retornará o elemento ao qual os nós do modelo foram adicionados.

mounted

Depois de renderizar seu modelo, você pode usar a propriedade mounted para verificar se seu modelo foi adicionado ao destino conforme desejado.

A propriedade mounted não informará se o modelo está realmente anexado a um documento. Para isso, você pode usar o parentNode?.isConnected.

javascript
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

O childNodes fornecerá uma variedade de nós de nível superior renderizados pelo modelo.

javascript
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 remover seu modelo do destino, você pode usar o método unmount.

temp.unmount()

O unmount deve ser a ÚNICA maneira de remover o modelo do DOM. Isso ocorre porque ele também cancela a assinatura de qualquer estado recursivamente. Isso significa que mesmo quando você aninhar modelos, o unmount será chamado para todos eles.

A manipulação direta do DOM pode ter resultados indesejados.

toString

Convenientemente, você pode obter uma representação em string do seu modelo em seu estado renderizado atual.

javascript
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 ao vivo

Existem métodos adicionais disponíveis para fins de ciclo de vida. Você pode saber mais verificando o documento lifecycle.

editar este documento