Os Web Components estão ganhando suporte para diferentes navegadores, a comunidade está crescendo rapidamente e há um catálogo totalmente novo de Web Component para encontrar exatamente o componente que você precisa.
Você já quis criar seu próprio componente JavaScript independente, que pudesse ser usado facilmente em vários projetos ou compartilhado com outros desenvolvedores, independentemente do framework de JavaScript usado por eles? O Web Components pode ser para você.
Web Components é um conjunto de novos recursos de plataforma da Web que permite que você crie seus próprios elementos HTML. Cada novo elemento personalizado pode ter uma tag personalizada, como <my-button>, e ter todas as vantagens dos elementos integrados. Os elementos personalizados podem ter propriedades e métodos, disparar e responder a eventos e até mesmo ter um estilo encapsulado e árvores DOM para trazer uma aparência própria.
Ao fornecer um modelo de componente de baixo nível baseado em plataforma, os componentes da Web permitem criar e compartilhar elementos reutilizáveis para tudo, de botões especializados a visualizações complexas, como seletores de data. Como os componentes da Web são criados com APIs de plataforma que incluem primitivos de encapsulamento avançados, é possível até mesmo usar esses componentes em outras bibliotecas ou frameworks JavaScript como se fossem elementos DOM padrão.
Talvez você já tenha ouvido falar dos Web Components. Uma versão inicial da especificação Web Components - v0 - foi enviado no Chrome 33.
Hoje, graças à ampla colaboração entre fornecedores de navegador, a próxima geração da especificação Web Components, a v1, está ganhando amplo suporte. A partir do Chrome 53 e do Chrome 54, o Chrome oferece suporte para as duas especificações principais que compõem os componentes da Web, o shadow DOM e os elementos personalizados. O Safari oferece suporte ao Shadow DOM v1 no Safari 10 e concluiu a implementação de Custom Elements v1 no WebKit. No momento, o Firefox está desenvolvendo o Shadow DOM e os Elementos personalizados v1. O DOM Sombra e os Elementos personalizados estão nos planos do Edge.
Para definir um novo elemento personalizado usando a implementação da v1, basta criar uma
nova classe que estenda o HTMLElement usando a sintaxe ES6 e registrá-la no
navegador:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
As novas especificações da v1 são extremamente eficientes. Criamos tutoriais sobre como usar os elementos personalizados v1 e o Shadow DOM v1 para começar.
webcomponents.org
A comunidade de componentes da Web também está crescendo rapidamente. Estamos animados em ver o lançamento de um site webcomponents.org atualizado, o ponto focal da comunidade de componentes da Web, incluindo um catálogo integrado para desenvolvedores compartilharem os elementos deles.
O site webcomponents.org contém informações sobre as especificações, atualizações e conteúdo dos componentes da Web da comunidade de componentes da Web e exibe a documentação de elementos de código aberto e coleções de elementos criados por outros desenvolvedores.
Você pode começar a criar seu primeiro elemento usando uma biblioteca como a Polymer do Google ou apenas usar a API Web Component de baixo nível diretamente. Em seguida, publique o elemento em webcomponents.org.
Divirta-se com os componentes.