Criando Seu Próprio Elemento HTML em JavaScript

Por padrão, o HTML oferece uma série de elementos embutidos que podem ser utilizados para montar a estrutura de uma página web. Contudo, não estamos limitados apenas aos elementos HTML embutidos e podemos criar e utilizar nossos próprios elementos.

No JavaScript, um elemento HTML é representado pela interface HTMLElement. Implementando essa interface em JavaScript, podemos criar nossas próprias classes que representarão elementos HTML e, em seguida, utilizá-los em nossas páginas. Veja um exemplo abaixo:

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <hello-programicio></hello-programicio>
  </body>
</html>

Neste caso, definimos um elemento <hello-programicio> na página, um elemento que ainda não existe. Mas vamos criá-lo agora.

Para definir uma classe que representará um elemento HTML, basta criar uma classe que implemente a interface HTMLElement:

class HelloProgramicio extends HTMLElement {}

Um passo crucial é registrar o nosso elemento HTML personalizado para que o navegador reconheça sua existência. Utilizamos a função embutida customElements.define(name, constructor, options); que aceita três parâmetros:

name: nome do elemento HTML personalizado, que deve conter um hífen.
constructor: o construtor da classe JavaScript que representa o elemento HTML.
options: um parâmetro opcional que configura o elemento HTML personalizado. Atualmente, suporta um parâmetro, extends, que especifica o nome de um elemento HTML embutido que é usado para criar o elemento personalizado.

Por exemplo:

customElements.define("hello-programicio", HelloProgramicio);

A implementação completa seria:

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <hello-programicio></hello-programicio>
    <script>
      class HelloProgramicio extends HTMLElement {
        constructor() {
          super(); // garante que todos os métodos e propriedades do HTMLElement sejam herdados
          let welcome = "Bom dia";
          const hour = new Date().getHours();
          if (hour > 17) {
            welcome = "Boa noite";
          } else if (hour > 12) {
            welcome = "Boa tarde";
          }
          this.innerText = welcome;
        }
      }
      customElements.define("hello-programicio", HelloProgramicio);
    </script>
  </body>
</html>

No construtor, obtemos a hora atual e definimos uma saudação apropriada dependendo da hora do dia. Como nossa classe implementa a interface HTMLElement, podemos usar propriedades padrão para elementos HTML, como innerText para definir o texto do elemento.

Adicionando Métodos a Elementos Personalizados

Assim como em classes comuns, podemos definir métodos nas classes de elementos e chamá-los posteriormente. Vamos definir um método simples que retorna a hora atual:

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <hello-programicio id="hello"></hello-programicio>
    <script>
      class HelloProgramicio extends HTMLElement {
        constructor() {
          super();
          let welcome = "Bom dia";
          const hour = new Date().getHours();
          if (hour > 17) {
            welcome = "Boa noite";
          } else if (hour > 12) {
            welcome = "Boa tarde";
          }
          this.style = "cursor: pointer;";
          this.innerText = welcome;
        }
        showTime() {
          console.log(new Date().toTimeString());
        }
      }
      customElements.define("hello-programicio", HelloProgramicio);
      const hello = document.getElementById("hello");
      hello.addEventListener("click", () => hello.showTime());
    </script>
  </body>
</html>

Neste exemplo, o método showTime simplesmente exibe a hora atual no console. No código JavaScript, obtemos o elemento pelo ID e anexamos um manipulador de eventos que chama o método showTime ao clicar no elemento, mostrando a hora atual no console.

Criação de Elemento HTML, HTMLElement e customElements.define

Eventos do Ciclo de Vida de Elementos HTML Personalizados

Um elemento HTML personalizado possui seu próprio ciclo de vida, que é descrito pelos seguintes métodos:

connectedCallback: chamado sempre que o elemento HTML personalizado é adicionado ao DOM.
disconnectedCallback: chamado sempre que o elemento HTML personalizado é removido do DOM.
adoptedCallback: chamado sempre que o elemento HTML personalizado é movido para um novo documento.
attributeChangedCallback: chamado sempre que um atributo do elemento é adicionado, alterado ou removido.

Por exemplo, vamos aplicar o método connectedCallback():

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <hello-programicio id="hello"></hello-programicio>
    <script>
      class HelloProgramicio extends HTMLElement {
        constructor() {
          super();
          let welcome = "Bom dia";
          const hour = new Date().getHours();
          if (hour > 17) {
            welcome = "Boa noite";
          } else if (hour > 12) {
            welcome = "Boa tarde";
          }
          this.style.cursor = "pointer";
          this.innerText = welcome;
        }
        connectedCallback() {
          this.style.color = "red";
        }
        showTime() {
          console.log(new Date().toTimeString());
        }
      }
      customElements.define("hello-programicio", HelloProgramicio);
    </script>
  </body>
</html>

Neste caso, no método connectedCallback(), simplesmente definimos a cor do texto para vermelho:

this.style.color = "red";

Adicionando Atributos

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <hello-programicio hellocolor="green"></hello-programicio>
    <br />
    <hello-programicio></hello-programicio>
    <script>
      class HelloProgramicio extends HTMLElement {
        constructor() {
          super();
          let welcome = "Bom dia";
          const hour = new Date().getHours();
          if (hour > 17) {
            welcome = "Boa noite";
          } else if (hour > 12) {
            welcome = "Boa tarde";
          }
          this.style.cursor = "pointer";
          this.innerText = welcome;
        }
        connectedCallback() {
          this.style.color = "red";
          if (this.hasAttribute("hellocolor")) {
            this.style.color = this.getAttribute("hellocolor");
          }
        }
        showTime() {
          console.log(new Date().toTimeString());
        }
      }
      customElements.define("hello-programicio", HelloProgramicio);
    </script>
  </body>
</html>

Neste caso, o elemento aceita o atributo hellocolor, que define a cor do texto do elemento. Se este atributo estiver definido, a cor do texto será ajustada de acordo. Se não estiver definido, será utilizada a cor padrão, que é vermelha:

this.style.color = "red";
if (this.hasAttribute("hellocolor")) {
  this.style.color = this.getAttribute("hellocolor");
}

Atributos de Elemento HTML, HTMLElement e customElements.define e connectedCallback

Estilização CSS

A estilização de um elemento através do CSS é realizada da mesma forma que a estilização de qualquer outro elemento:

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
    <style>
      hello-programicio {
        font-family: Verdana;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <hello-programicio hellocolor="green"></hello-programicio>
    <script>
      class HelloProgramicio extends HTMLElement {
        constructor() {
          super();

          let welcome = "Bom dia";
          const hour = new Date().getHours();
          if (hour > 17) {
            welcome = "Boa noite";
          } else if (hour > 12) {
            welcome = "Boa tarde";
          }
          this.style.cursor = "pointer";
          this.innerText = welcome;
        }
        connectedCallback() {
          this.style.color = "red";
          if (this.hasAttribute("hellocolor")) {
            this.style.color = this.getAttribute("hellocolor");
          }
        }
        showTime() {
          console.log(new Date().toTimeString());
        }
      }

      customElements.define("hello-programicio", HelloProgramicio);
    </script>
  </body>
</html>