Construir aplicações web modernas requer muita configuração e um uso demasiadamente excessivo de ferramentas e frameworks. Isso inclui pré-processadores, frameworks JavaScript das mais diversas formas e finalidades, ferramentas de teste e muito mais. E, à medida que a complexidade desses aplicativos cresce, enorme é também a amplitude de ferramentas e serviços necessários para gerenciá-los.

Além disso, quando falamos sobre manutenção de aplicações desse estilo, temos inúmeros profissionais envolvidos, processos mal estabelecidos e gerenciados, sem falar no código que vai se tornando cada vez maior, cheio de integrações, dependências e acoplamentos. Para ter uma ideia de como tudo isso funciona na prática, analisemos a Figura 1 que traz basicamente a representação final (HTML) do conteúdo de páginas em aplicações famosas como Google Gmail, Facebook e Amazon.

abrir imagem em nova janela

Figura 1. Conteúdo HTML das páginas do Gmail, Facebook e Amazon, respectivamente.

Perceba que logo de cara temos bastante conteúdo, e todo ele particionado em div’s e span’s, o que nos leva a questionar se essa estrutura característica realmente se faz tão necessária. Isso provavelmente também o levará a pensar como será toda a manutenção desse tipo de código dentro do projeto nessas empresas, e se as mesmas mantêm alguma estrutura de automatização ou usam frameworks para facilitar esse gerenciamento.

Muito tem sido discutido acerca dos valores semânticos que as tags da HTML5 trouxeram às nossas aplicações contemporâneas (e que também visavam a diminuição significativa de código HTML nas páginas), porém elas ainda estão longe de proporcionar uma “margem de lucro programática” significativa, principalmente por duas razões, a saber:

• Quando temos dois componentes muito similares em nossa página web que caem dentro da mesma estrutura semântica, para distingui-los um do outro, nós usamos classes, ids, ou outros atributos;

• A lista disponível de tags semânticas é simplesmente insuficiente para atingir a grande variedade de componentes que constituem nosso design. Como resultado, nós voltamos novamente para as tags tradicionais como div, span, etc.

A W3C pretende ir de encontro a esse problema ao introduzir o conceito de componentização web. Os componentes web são nada mais que uma coleção de especificações que possibilitam que desenvolvedores criem suas próprias aplicações web como um conjunto de componentes reusáveis. Através disso, eles proveem uma mudança de paradigma em relação à abordagem tradicional ao mudar fundamentalmente a forma como construímos e concebemos as aplicações web.

Cada componente vive em sua autodefinida unidade de encapsulamento com estilo e lógica correspondentes. Estes mesmos componentes não só podem ser compartilhados via aplicação web comum, como também distribuídos na web para uso de outrem. Basicamente, eles são constituídos de quatro especificações:

• Elementos customizados: Permitem que desenvolvedores criem seus próprios elementos (que são relevantes para o design) como parte da estrutura DOM com a habilidade de estilizar/impor scripts a eles como qualquer outra tag HTML.

• Templates HTML: Define fragmentos de marcação que permanecem consistentes sobre as páginas web com a habilidade de injetar conteúdo dinâmico usando somente JavaScript.

• Shadow DOM: Designado para abstrair todas as complexidades da marcação de tags através da definição de limites funcionais entre a árvore DOM e as sub-árvores escondidas atrás de uma shadow raiz.

• Importação de HTML: Similar à importação de arquivos CSS dentro deles mesmos, permite que voc ...