Os Web Components estão ganhando suporte entre navegadores, a comunidade está crescendo aos poucos e há um novíssimo catálogo de componentes da Web para encontrar exatamente o componente de que você precisa.
Você sempre quis criar seu próprio componente JavaScript independente usar facilmente em vários projetos ou compartilhar com outros desenvolvedores, independentemente qual framework de JavaScript eles usam? Web Components pode ser para você.
Os componentes da Web são um conjunto de novos recursos da plataforma da Web que permitem criar uma
próprios elementos HTML. Cada novo elemento personalizado pode ter uma tag personalizada como
<my-button> e tenha todos os benefícios dos elementos integrados: os personalizados
ter propriedades e métodos, acionar e responder a eventos e até
estilo encapsulado e árvores DOM para proporcionar um visual próprio.
Ao fornecer um modelo de componentes de baixo nível e baseado em plataforma, os Web Components permitem que você criar e compartilhar elementos reutilizáveis para tudo, desde botões especializados até visualizações complexas, como seletores de datas. Como os componentes da Web são criados com o design APIs que incluem primitivas de encapsulamento avançadas. É possível até mesmo usá-las componentes dentro de 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 Web Especificação de componentes - v0 - foi enviada no Chrome 33.
Hoje, graças à ampla colaboração entre os fornecedores de navegadores, a a próxima geração da especificação Web Components, a v1, está recebendo amplo suporte. O Chrome é compatível com as duas especificações principais que compõem os componentes da Web: Sombra DOM e Custom Elements - a partir do Chrome 53 e Chrome 54, respectivamente. Safari integrado ao Shadow DOM v1 no Safari 10 e concluído implementação de Elementos personalizados v1 na WebKit. O Firefox é em desenvolvimento no momento Shadow DOM e Custom Elementos v1 e ambos Sombra Modelo de objeto de documento (DOM, na sigla em inglês) e Personalizado Elements estão nos planos do Edge.
Para definir um novo elemento personalizado usando a implementação v1, basta criar um
nova classe que estende HTMLElement usando a sintaxe ES6 e a registra com o
navegador:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
As novas especificações v1 são extremamente eficientes, e nós criamos tutoriais sobre o uso Elementos personalizados v1 e o Shadow DOM v1, para ajudar antes de começar.
webcomponents.org
A comunidade de componentes da Web também está crescendo aos poucos. Estamos animados para conferir o lançamento webcomponents.org: o ponto focal do a comunidade de componentes da Web, incluindo um catálogo integrado para que os desenvolvedores compartilhar seus elementos.
O site webcomponents.org contém informações sobre os componentes da Web especificações, atualizações e conteúdo da Web de componentes internos e mostra documentação sobre código aberto elementos e coleções de elementos criados por outros desenvolvedores.
Você pode começar a criar seu primeiro elemento usando uma biblioteca como a do Google Polymer ou apenas a API de baixo nível da API do componente. Depois, publique seu elemento em webcomponents.org.
Aproveite a criação de componentes.