Todos n\u00f3s temos projetos em que n\u00e3o trabalhar\u00edamos. O c\u00f3digo tornou-se incontrol\u00e1vel, o escopo evoluiu, corre\u00e7\u00f5es r\u00e1pidas aplicadas em cima de outras corre\u00e7\u00f5es, e a estrutura desmoronou sob o seu peso de c\u00f3digo spaghetti. A codifica\u00e7\u00e3o pode ser um neg\u00f3cio desorganizado.<\/p>\n
Os projectos beneficiam da utiliza\u00e7\u00e3o de m\u00f3dulos simples e independentes que t\u00eam uma \u00fanica responsabilidade. O c\u00f3digo modular \u00e9 encapsulado, por isso h\u00e1 menos necessidade de se preocupar com a implementa\u00e7\u00e3o. Desde que voc\u00ea saiba o que um m\u00f3dulo ir\u00e1 sair quando lhe for dado um conjunto de entradas, voc\u00ea n\u00e3o precisa necessariamente entender como ele atingiu esse objetivo.<\/p>\n
A aplica\u00e7\u00e3o de conceitos modulares a uma \u00fanica linguagem de programa\u00e7\u00e3o<\/a> \u00e9 simples, mas o desenvolvimento web requer uma mistura diversificada de tecnologias. Os navegadores<\/a> analisam HTML<\/a>, CSS e JavaScript para renderizar o conte\u00fado, estilos e funcionalidades da p\u00e1gina.<\/p>\n Eles nem sempre se misturam facilmente porque:<\/p>\n Estes problemas somam-se aos encontrados pelos tempos de execu\u00e7\u00e3o do idioma, frameworks<\/a>, bancos de dados e outras depend\u00eancias utilizadas no servidor.<\/p>\n Um Componente Web \u00e9 uma forma de criar um bloco de c\u00f3digo de responsabilidade \u00fanica encapsulado que pode ser reutilizado em qualquer p\u00e1gina.<\/p>\n Considere a tag HTML O estilo e a funcionalidade s\u00e3o fornecidos, embora voc\u00ea possa fazer modifica\u00e7\u00f5es usando v\u00e1rios atributos e chamadas API JavaScript. Qualquer n\u00famero de elementos E se voc\u00ea precisar de sua pr\u00f3pria funcionalidade personalizada? Por exemplo, um elemento que mostre o n\u00famero de palavras na p\u00e1gina? N\u00e3o h\u00e1 tag HTML Frameworks como React<\/a> e Vue.js<\/a> permitem que os desenvolvedores criem componentes web onde o conte\u00fado, estilo e funcionalidade podem ser definidos em um \u00fanico arquivo JavaScript. Estes resolvem muitos problemas de programa\u00e7\u00e3o complexos, mas tenha isso em mente:<\/p>\n Felizmente, os conceitos populares introduzidos em bibliotecas e frameworks costumam se tornar padr\u00f5es na web. Levou algum tempo, mas os componentes da Web j\u00e1 chegaram.<\/p>\n\n Ap\u00f3s muitas falsas partidas espec\u00edficas de fornecedores, o conceito de componentes Web padr\u00e3o foi introduzido pela primeira vez por Alex Russell na Confer\u00eancia Fronteers em 2011<\/a>. A biblioteca de pol\u00edmeros<\/a> do Google (um polifill baseado nas propostas atuais) chegou dois anos depois, mas as primeiras implementa\u00e7\u00f5es n\u00e3o apareceram no Chrome e Safari at\u00e9 2016.<\/p>\n Os fornecedores de navegadores demoraram a negociar os detalhes, mas os componentes Web foram adicionados ao Firefox em 2018 e ao Edge em 2020 (quando a Microsoft mudou para o motor Chromium).<\/p>\n Compreensivelmente, poucos desenvolvedores t\u00eam estado dispostos ou capazes de adotar componentes Web, mas finalmente atingimos um bom n\u00edvel de suporte a navegador com APIs est\u00e1veis. Nem tudo \u00e9 perfeito, mas elas s\u00e3o uma alternativa cada vez mais vi\u00e1vel aos componentes baseados em framework.<\/p>\n Mesmo que voc\u00ea ainda n\u00e3o esteja disposto a despejar seu favorito, os componentes da Web s\u00e3o compat\u00edveis com todas as frameworks, e as APIs ser\u00e3o suportadas nos pr\u00f3ximos anos.<\/p>\n Reposit\u00f3rios de componentes Web pr\u00e9-constru\u00eddos est\u00e3o dispon\u00edveis para que todos possam dar uma olhada:<\/p>\n … mas escrever o seu pr\u00f3prio c\u00f3digo \u00e9 mais divertido!<\/p>\n Este tutorial fornece uma introdu\u00e7\u00e3o completa aos Componentes Web escritos sem uma estrutura JavaScript. Voc\u00ea aprender\u00e1 o que eles s\u00e3o e como adapt\u00e1-los para seus projetos web. Voc\u00ea vai precisar de algum conhecimento de HTML5<\/a>, CSS e JavaScript.<\/p>\n Componentes Web s\u00e3o elementos HTML personalizados tais como Deve-se definir uma classe ES2015 para controlar o elemento. Pode ser chamado de qualquer coisa, mas o HelloWorld \u00e9 uma pr\u00e1tica comum. Ele deve estender a interface do HTMLElement<\/a>, que representa as propriedades e m\u00e9todos padr\u00e3o de cada elemento HTML.<\/p>\n\n
Confira nosso Guia em V\u00eddeo<\/a> sobre Componentes da Web<\/h3>\n
O que s\u00e3o componentes da Web?<\/h2>\n
<video<\/strong>><\/code>. Dado um URL<\/a>, um visualizador pode usar controles como play, pause, mover para tr\u00e1s, mover para frente, e ajustar o volume.<\/p>\n<video><\/code> <\/strong>pode ser colocado dentro de outras tags, e eles n\u00e3o entram em conflito.<\/p>\n<wordcount><\/strong><\/code> (ainda).<\/p>\n\n
Uma breve hist\u00f3ria dos componentes da Web<\/h2>\n
\n
Come\u00e7ando com componentes da Web<\/h2>\n
<hello-world><\/hello-world><\/b><\/code>. O nome deve conter um tra\u00e7o para nunca entrar em conflito com os elementos oficialmente suportados na especifica\u00e7\u00e3o HTML.<\/p>\n