Os componentes da Web estão ganhando suporte para vários navegadores, a comunidade está crescendo rapidamente e há um novo catálogo de componentes da Web para encontrar exatamente o componente que você precisa.
Já quis criar seu próprio componente JavaScript independente, que possa ser usado em vários projetos ou compartilhado com outros desenvolvedores, independentemente da estrutura JavaScript usada? Os componentes da Web podem ser para você.
Os componentes da Web são um conjunto de novos recursos da plataforma da Web que permitem criar 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 a própria aparência.
Ao fornecer um modelo de componente de baixo nível baseado em plataforma, os Web Components permitem criar e compartilhar elementos reutilizáveis para tudo, desde botões especializados até visualizações complexas, como data pickers. Como os componentes da Web são criados com APIs de plataforma que incluem primitivas de encapsulamento poderosas, é possível usar esses componentes em outras bibliotecas ou frameworks JavaScript como se fossem elementos DOM padrão.
Você já deve ter ouvido falar dos Web Components. Uma versão inicial da especificação dos Web Components, a v0, foi fornecida no Chrome 33.
Atualmente, graças à ampla colaboração entre os fornecedores de navegadores, a próxima geração da especificação de componentes da Web, a v1, está ganhando amplo suporte. O Chrome oferece suporte às duas principais especificações que compõem os Web Components: Shadow DOM e Elementos personalizados, a partir do Chrome 53 e do Chrome 54, respectivamente. O Safari oferece suporte ao Shadow DOM v1 no Safari 10 e concluiu a implementação de Custom Elements v1 no WebKit. O Firefox está desenvolvendo a v1 do DOM sombreado e dos Elementos personalizados. O DOM sombreado e os Elementos personalizados estão no cronograma do Edge.
Para definir um novo elemento personalizado usando a implementação da v1, basta criar uma
nova classe que estende HTMLElement usando a sintaxe ES6 e registrá-la com o
navegador:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
As novas especificações v1 são extremamente poderosas. Criamos tutoriais sobre o uso de elementos personalizados v1 e do Shadow DOM v1 para ajudar você a começar.
webcomponents.org
A comunidade de componentes da Web também está crescendo rapidamente. Estamos felizes com o lançamento de um site atualizado webcomponents.org, o ponto focal da comunidade de componentes da Web, que inclui um catálogo integrado para que os desenvolvedores possam compartilhar os elementos.
O site webcomponents.org contém informações sobre as specs dos Componentes da Web, atualizações e conteúdo da comunidade de Componentes da Web e mostra a documentação de elementos de código aberto e coleções de elementos criadas por outros desenvolvedores.
Você pode começar a criar seu primeiro elemento usando uma biblioteca como o Polymer do Google ou simplesmente usar as APIs de componente da Web de baixo nível diretamente. Em seguida, publique seu elemento em webcomponents.org.
Boas com a criação de componentes!