Concrete Logo
Hamburger button

Guia geral sobre Web Components

  • Blog
  • 5 de Junho de 2017
Share

Tente imaginar como você poderia reutilizar uma galeria em diferentes projetos. Você provavelmente pegaria um JavaScript e importaria seu conteúdo com <script src>, seu CSS por meio de <link rel="stylesheet">, acrescentaria uma <div> na página e, por fim, inicializaria com um callback do evento DOMContentLoaded. Consegue enxergar o trabalho que é utilizar uma galeria em um único projeto? Agora tente fazer isso com diferentes componentes em diversos projetos e verá o esforço necessário.

O que são os Web Components?

Uma forma de criar componentes reutilizáveis para a Web nativamente, utilizando apenas HTML, CSS e JavaScript. Os principais benefícios são código menores, modulares e reutilizáveis.

Os Web Components possuem quatro fundamentos:

- Custom Elements: permite a criação de novas tags HTML.
- Shadow DOM: permite esconder elementos do DOM. Eles são renderizados pelo navegador e não são acessíveis pelas formas convencionais (document.querySelector).
- HTML Templates: Permite declarar fragmentos de HTML para serem utilizados como modelo. Eles não são renderizados pelo navegador.
- HTML Imports: Permite importar páginas HTML completas, incluindo o JavaScript e CSS embutidos nelas.

Custom Elements

O Custom Elements é um recurso que nos permite criar novos elementos para páginas HTML, o que faz com que o conteúdo da página seja mais semântico. Ele também possibilita a herança de elementos preexistentes, dando maior flexibilidade às customizações.

Exemplo :
Definindo uma nova tag, chamada custom-header, que possuirá um cabeçalho em seu conteúdo:

Shadow DOM (v1)

O Shadow DOM é um recurso que nos permite encapsular elementos de um componente. Ele torna o DOM de um componente inacessível, cria um escopo para o CSS e permite que elementos sejam exibidos dentro do componente mesmo que não façam parte dele.

Exemplo 1:
Definindo uma Shadow DOM para um elemento <header>:

Exemplo 2:
Definindo uma Shadow DOM para um elemento <header> e atribuindo uma cor para o fundo, permitindo que a cor seja trocada pelo atributo customizado --custom-header-bg:

Exemplo 3 :
Definindo uma Shadow DOM para a nova tag chamada<custom-header> e permitindo que o conteúdo do cabeçalho <h2>possa ser substituído pelo conteúdo da tag:

HTML Templates

O HTML Templates é um recurso que permite a definição de modelos HTML. Eles são invisíveis para o navegador e seu conteúdo não é processado.

Exemplo:
Definindo uma nova tag chamada <custom-header>
, atribuindo uma Shadow DOM e, por fim, escrevendo o conteúdo do <template> na Shadow DOM:

HTML Imports

O HTML Imports importa uma página HTML completa, incluindo seu JavaScript e CSS. A página importada é processada paralelamente enquanto a página que a importou continua seu processamento normalmente.

Exemplo :
Definindo um Web Component completo em um arquivo, apenas modificando como é realizado o querySelector e importando com a tag <link rel="import">:

Suporte

O suporte dos navegadores é excelente, veja a compatibilidade. A maioria deles possui um bom suporte aos recursos para a construção de Web Components, sendo HTML Imports o único recurso problemático. Existem polyfills que permitem a utilização de Web Components em navegadores que não oferecem compatibilidade.

Ficou alguma dúvida ou tem algo para contribuir? Aproveite os campos abaixo. Até a próxima!

Algumas referências:

– https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom?hl=pt-br
– https://developers.google.com/web/fundamentals/getting-started/primers/customelements?hl=pt-br
– https://www.html5rocks.com/en/tutorials/webcomponents/imports/
– https://www.html5rocks.com/en/tutorials/webcomponents/template/
– https://www.webcomponents.org/

É desenvolvedor JavaScript e quer trabalhar em um time ágil de verdade? Deixe aqui o seu currículo.