Atualmente estou estudando WebComponents, Polymer, LitElement e afins e me deparei com essa característica da criação do template usando LitElement que eu nunca havia visto:
html`<div>Teste</div>`
O mesmo vale para CSS:
css`div {color: blue}`
O código pode ser conferido aqui e o resultado aqui
Tentando entender melhor como funciona essa declaração js fui no código fonte e descobri que não passa de uma função diferentona:
/**
* Interprets a template literal as an HTML template that can efficiently
* render to and update a container.
*/
export const html = (strings: TemplateStringsArray, ...values: unknown[]) =>
new TemplateResult(strings, values, 'html', defaultTemplateProcessor);
Então tentei implementar algo do tipo pra entender como funciona:
html = (t, i) => {
console.log(t, i);
console.log(typeof t, typeof i);
}
html('teste');
html`teste`;
No console aparece:
O que me fez entender menos ainda essa declaração:
<function>`<parameter>`
Onde eu passo uma string e na verdade eu recebo um objeto que parece um array.... afinal, do que se trata essa declaração? E como atingir a segunda variável da função? Quais são os reais benefícios e quando devo usar esse tipo de declaração? Tem alguma coisa a ver com String.raw()?