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

class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      
    `;
  }
}

class Footer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `	   
           
    `;
  }
}

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:

1. 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.
2. Um objeto de classe que define o comportamento do elemento.

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

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

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. 🙂