Como criar tags customizadas no HTML

É comum que, quando estamos desenvolvendo um site ou algum outro sistema, o código se torne bastante verboso e até mesmo difícil de identificar o que faz determinado trecho de código HTML, de modo que este se torna confuso e trabalhoso de manter. Uma solução interessante para este tipo de problema é a criação de suas próprias tags, pois você pode dar-lhes nomes específicos que deixam claro a sua respectiva função, tornando o código muito mais fácil de ser interpretado para você ou para outro desenvolvedor. Além disso, as tags personalizadas permitem que você implemente vários comportamentos, tenha um código muito mais limpo e simples, além de serem realmente muito simples de serem implementadas.

Tags customizadas

Como você deve saber, a linguagem HTML vem com uma grande quantidade de tags que permitem que nós façamos e criemos diversos tipos de elementos, cada um com um tipo de comportamento, que pode ser modificado com o uso de CSS e Javascript. Contudo, a grande maioria das aplicações web requer muito mais do que os elementos padrão do HTML, de forma que é preciso uma grande quantidade de tags para gerar um determinado componente ou comportamento, de forma que a solução final não parece muito eficiente e elegante.

A solução para esse problema, para o qual poucas pessoas se atentam, é o uso de tags personalizadas, que funciona como qualquer outra tag HTML, ou seja, podemos adicionar estilos, scripts, atributos, entre outros. Podemos, também, criar nossos próprios atributos e sub tags para gerarmos uma funcionalidade ou componente completo.

Como criar uma tag customizada

Criar uma tag customizada é realmente muito simples. Basta que você escreva o nome da sua tag, declarando-a no HTML como qualquer outra, com um nome duplo separado por "-". Por exemplo, podemos criar uma tag chamada "lista-de-frutas":

<lista-de-frutas></lista-de-frutas>

Agora, podemos também adicionar algumas frutas a essa lista. Há muitas forma de se fazer isso... Eis um exemplo:

 <lista-de-frutas>

     <fruta-item>Maçã</fruta-item>

     <fruta-item>Goiaba</fruta-item>

     <fruta-item>Laranja</fruta-item>

 </lista-de-frutas>

Mas, vamos fazer isto utilizando um pouco de Javascript, para tornar as coisas um pouco mais divertidas :). Então, vamos selecionar este elemento via Javascript para adicionar as frutas que deverão aparecer dentro dele. Depois disso, vamos adicionar alguns estilos.

Primeiro, vamos adicionar um atributo chamado "fruits" e o código Javascript, a explicação vem logo abaixo:

   

<lista-de-frutas fruits="Maçã,Goiaba,Laranja"></lista-de-frutas>

 <script>

     let fruitsList = document.querySelector('lista-de-frutas');

     let list = ``;

     let fruits = fruitsList.getAttribute('fruits').split(',');

     fruits.forEach(fruit => {

         list += `<fruta-item>${fruit}</fruta-item>`;

     });

     fruitsList.innerHTML = list;

 </script>

Neste código, passamos algumas frutas para dentro do atributo "fruits", separando-as por vírgulas para que possamos, depois, separar cada uma dentro de uma tag "fruta-item" via Javascript. Depois, dentro da tag script, passamos o nosso elemento "lista-de-frutas" para a variável fruitsList, também iniciamos uma variável chamada list, que vai receber o HTML gerado durante o processo. Criamos uma outra variável, chamada fruits, que recebe um array contendo as frutas passadas pelo atributo "fruits": primeiro, pegamos o valor deste atributo com o método getAttribute(), depois dividimos a string retornada por esse método com o método split(), que "quebra" a string em todos os pontos onde ela encontra a string passada como parâmetro (removendo também essa string passada), retornando um array com todas aquelas frutas.

Após isso, simplesmente é feito um loop através dos items deste array de frutas, de modo a adicionar um código HTML para a variável list, que é o nosso elemento "fruta-item" contendo aquela fruta. Ao final, basta adicionar este código dentro da nossa tag "lista-de-frutas".

Analise um pouco este código e faça os seus próprios testes, é bem simples.

Agora, vamos adicionar alguns estilos, pois, se você for ver o resultado no navegador, verá que esse código não produz um resultado visual muito agradável:

Então, vamos colocar este estilo básico:

 <style>

     lista-de-frutas {

         display: grid;

        padding-left: 10px;

        padding-right: 10px;

        width: 200px;

        border-radius: 6px;

        border: solid lightgray 1px;

        box-shadow: 3px 3px 9px lightgray;

     }

    lista-de-frutas > fruta-item {

        display: block;

        padding-top: 8px;

        padding-bottom: 8px;

    }

    lista-de-frutas > * + * {

        border-top: solid 1px;

        border-color: lightgray;

    }

 </style>

   

Assim, teremos um resultado um pouco mais interessante:

Agora, sempre que você quiser criar uma lista de frutas, basta apenas utilizar uma tag e um atributo! Isto reduz muito o seu HTML e torna as coisas mais claras. Você pode adaptar isso a muitas outras aplicações, e criar seus próprios componentes, de forma que, com a prática e a criatividade, muitas ideias boas virão! :)

Vale lembrar que este é apenas um exemplo simples, onde também pode não parecer tão evidente a utilidade das tags customizadas, mas, normalmente, elas podem fazer uma grande diferença, gerando um código muito mais legível e fácil de se manter. Vou continuar escrevendo mais alguns artigos sobre assuntos relacionados aqui no blog, de forma que você poderá, com o estudo, criar incríveis aplicações sem o uso de grandes frameworks ou bibliotecas para fazer certas tarefas, o que pode ser muito bom para alguns tipos de projeto e muito melhor ainda para você, que se torna cada vez mais um profissional diferenciado.