Como criar componentes HTML reutilizáveis sem estruturas baseadas em componente

Mas como podemos conseguir isso sem uma sólida compreensão dessas estruturas baseadas em componentes e um forte conhecimento de JavaScript?

Pensei nisso depois de trabalhar em um site de 30 páginas para um banco em algum momento antes de saber como usar o Vue.js, React ou o famoso PHP includes função.

Fiquei sem outra opção senão copiar e colar em série as mesmas seções de cabeçalho e rodapé em todos os 30 arquivos HTML. Estressante, não é?

Definitivamente, porque para cada alteração feita no cabeçalho ou rodapé, o mesmo precisava ser feito para todas as outras páginas.

Isso me frustrou e me levou a começar a pensar se havia uma maneira de uma página em HTML puro ter componentes. Isso tornaria o trabalho mais fácil para pessoas como eu, que apenas conhecem HTML, CSS e JavaScript baunilha.

Neste artigo, mostrarei rapidamente como criar componentes JavaScript e chamar cada componente em seu HTML.

Imagine que temos um site de cinco páginas, todas com o mesmo cabeçalho e o mesmo rodapé.

A primeira etapa é copiar a seção HTML do cabeçalho existente e colocá-la em um objeto de classe em JavaScript. Em seguida, renderize-o na página usando innerHTML:

class Header extends HTMLElement {  connectedCallback() {    this.innerHTML = `                         {*Header code goes here *}               
    `;  }}class Footer extends HTMLElement {  connectedCallback() {    this.innerHTML = `	                             {*footer code goes here *}               
         `;  }}

O arquivo JavaScript define uma classe chamada Header que estende o genérico HTMLElement classe.

connectedCallback() é chamado sempre que o elemento / componente personalizado é anexado a um elemento conectado ao documento.

A diferença entre usar connectedCallback() e constructor() é aquele constructor() é chamado quando o elemento é criado e connectedCallback() é chamado depois que o elemento é anexado ao DOM.

Mas qualquer um trabalha para o que queremos alcançar.

Finalmente, this.innnerHTML exibe o conteúdo na tag HTML.

Para ir além, temos que registrar um elemento personalizado na página. Fazemos isso usando o CustomElementRegistry.define() método.

Isso leva os seguintes argumentos:

UMA DOMString representando o nome que você está dando ao elemento personalizado. Observe que os nomes de elementos personalizados exigem que um traço seja usado neles (kebab-case) e eles não podem ser palavras únicas.
Um objeto de classe que define o comportamento do elemento.

customElements.define('main-header', Header);customElements.define('main-footer', Footer);

Definindo cada uma das classes

main-header é o DOMString que representa o nome que estamos dando ao elemento e Header é o objeto que define o elemento

Arquivo HTML

Este segmento de código está mostrando a linha HTML que é a DOMString definida usando customElements.

Com essas duas etapas, você pode criar facilmente componentes reutilizáveis com apenas HTML e JavaScript básico.

Exemplo

Não se limita apenas ao rodapé e cabeçalho, mas a todos os componentes reutilizáveis que você possa ter em seu projeto.

Você pode me seguir Twitter para ficar atualizado sobre minhas últimas postagens. Espero que você tenha achado este post útil. 🙂