Você já deve conhecer o HTML, certo? Uma ótima ferramenta para construir aplicações na web. O HTML é declarativo, portável, bem suportado e fácil de trabalhar. Quando você está construindo um documento ou uma aplicação com HTML você tem algumas opções disponíveis. Você quer criar uma âncora? Utilize a tag <a>. Quer criar um parágrafo? Utilize a tag <p>. Um botão? Você pode utilizar a tag <button> ou a <input type="button">.
Mas e se, por exemplo, você quiser criar uma aba? Que tag do HTML você vai usar? E se for um tooltip ou um accordion? O vocabulário do HTML é limitado e não existe uma tag que descreva completamente cada um dos elementos de interface anteriores. Normalmente, tais componentes envolvem utilizar mais de uma tag HTML associado à um pouco de comportamento dado em um script. Isso não é uma tarefa simples. E fica cada vez mais complexa quanto mais elementos em tela você precisar controlar. Não seria mais fácil uma forma de você poder “estender” o HTML e poder criar elementos personalizados para a sua necessidade, encapsulando estilo, comportamento e marcação em uma só “entidade”?
Os web components são a resposta da plataforma web para este problema. Com eles, você pode criar elementos personalizados e fazer uma extensão do HTML, preenchendo as lacunas e ligando a estrutura declarativa com o comportamento via código. Se você está com um problema que o HTML não pode resolver, talvez a criação de um elemento personalizado pode. Elementos personalizados permitem que os navegadores adicionem comportamento ao HTML e preservando os benefícios que já possui.
Os web components são, na verdade, um termo “guarda-chuva” para um conjunto de APIs e tecnologias disponibilizadas nos navegadores que, quando utilizadas em conjunto, permitem a criação de componentes completos. Se fundamentam em três principais especificações:
Antes de detalhar cada uma dessas especificações, vamos fazer um apanhado geral de como web components trabalham e como você pode utilizá-los.
Como definir e instanciar um web component 🙝
Para criar um web component basta você estender a classe HTMLElement e registrar uma tag associada a essa classe por meio do método define do objeto global customElements. Simples assim! Veja um exemplo no código abaixo que está utilizando a sintaxe de classes do ES2015.
class HelloWorld extends HTMLElement {}
window.customElements.define('hello-world', HelloWorld);A partir de agora, utilizar o elemento hello-world não é diferente de utilizar um div. Você pode utilizar a tag de forma declarativa no HTML. Ou criar um elemento de forma imperativa por meio do DOM. Você também pode utilizar as APIs do DOM para selecionar e manipular seu elemento personalizado como qualquer outro. Veja abaixo:
Você pode ver que, como com seu elemento personalizado presente na árvore DOM, nada é exibido no navegador. Isso acontece porque ainda não adicionamos conteúdo ao web component.
Adicionando conteúdo ao web component 🙝
Todo e qualquer comportamento do componente é dado pela a classe associada à tag. No nosso caso, se queremos adicionar um conteúdo ao hello-world, precisamos defini-lo na classe HelloWorld. Como o próprio nome do componente sugere, vamos exibir a frase “Hello, World!” em um h1 no nosso componente. Para fazer isso, sobreescrevemos o método connectedCallback. Veja:
Adicionando estilos ao web component 🙝
Bom, agora que temos nosso componente, vamos estilizá-lo para que o h1 tenha uma cor azul. Podemos fazer isso com CSS utilizando o elemento style e atribuímos ao head do documento. Veja:
No entanto você vai perceber que outros elementos h1 foram estilizados também. Isso acontece porque o comportamento padrão do CSS é global. Uma folha de estilos afeta todos os elementos de um documento. No entanto, para solucionar este problema, temos em mãos a API Shadow DOM.
Encapsulando o web component 🙝
A Shadow DOM é uma API que permite criar subárvores DOM encapsuladas da árvore DOM principal. Assim, qualquer marcação, estilo ou script que seja definido no shadow DOM só afeta o próprio shadow DOM. Nós podemos fazer isso por meio do método attachShadow. Veja:
Se você ver o resultado, agora somente o h1 do web component está estilizado e, graças ao shadow DOM, não temos efeitos colaterais em outros elementos da árvore DOM.
Conclusão 🙝
O termo web components define um conjunto de especificações de baixo nível que, quando utilizadas em conjunto, permitem criar verdadeiros componentes que podem ser reutilizados em uma aplicação sem a necessidade de convenção, biblioteca ou framework.
Existem outras especificações abrangidas pelo termo web components e que não vimos nesta introdução; como o elemento template, o elemento slot ou os módulos de CSS. Meu objetivo é criar uma série de publicações abordando os detalhes de cada uma dessas especificações. Além disso, vamos ver algumas boas práticas quando estamos trabalhando com componentes e como podemos utilizá-los para solucionar problemas durante o desenvolvimento de aplicações para a web.
Conforme o desenvolvimento web se torna mais complexo, desenvolvedores irão “repassar” mais responsabilidades para a plataforma, que amadurece e evolui. Este é o caso dos web components que, atualmente, já são suportados na grande maioria dos grandes navegadores.
No entanto, essa é uma tecnologia ainda em fase de construção. Certas especificações ainda estão em fase inicial ou com suporte bastante limitado, mas que ilustram um futuro promissor para a tecnologia.