{"id":1152,"date":"2020-03-20T13:37:08","date_gmt":"2020-03-20T13:37:08","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=1152"},"modified":"2021-10-24T19:26:00","modified_gmt":"2021-10-24T19:26:00","slug":"web-components-guia-geral","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/web-components-guia-geral\/","title":{"rendered":"Web Components \u2013 Guia Geral"},"content":{"rendered":"\n

Neste guia veremos o que s\u00e3o web components, quando usar, sua estrutura e tamb\u00e9m um crash course <\/em>criando um web component do zero que \u00e9 um card Pok\u00e9mon, com v\u00e1rios recursos interessantes.<\/p>\n\n\n\n\n\n\n\n

O que s\u00e3o web components<\/h2>\n\n\n\n

Web Components s\u00e3o elementos customizados reutiliz\u00e1veis constru\u00eddos com diferentes tecnologias para serem utilizados em aplica\u00e7\u00f5es web.<\/p>\n\n\n\n

Quando usar<\/h2>\n\n\n\n

Voc\u00ea j\u00e1 desenvolveu com Angular<\/a>, Vue.js<\/a> ou React<\/a>? Uma das grandes vantagens da utiliza\u00e7\u00e3o desses frameworks \u00e9 a reutiliza\u00e7\u00e3o do c\u00f3digo, atrav\u00e9s de componentes customizados. Agora imagine todo esse poder usando HTML, CSS e JavaScript sem precisar utilizar nenhum framework, \u00e9 nesse momento que surgem os web components.<\/p>\n\n\n\n

Estrutura<\/h2>\n\n\n\n

Os web components s\u00e3o formados por tr\u00eas principais tecnologias que usadas em conjunto permitem criarmos componentes reutiliz\u00e1veis mas tamb\u00e9m encapsulados, evitando conflito de c\u00f3digo.<\/p>\n\n\n\n

Elementos customizados<\/h3>\n\n\n\n

Elemento customizado \u00e9 a possibilidade de criarmos um elemento por exemplo <andre-felizardo><\/andre-felizardo><\/code> atrav\u00e9s de APIs do Javascript<\/a> que permitem definir comportamentos para esse elemento.<\/p>\n\n\n\n

Shadow DOM<\/h3>\n\n\n\n

DOM<\/em><\/h4>\n\n\n\n

Primeiro precisamos entender o que \u00e9 DOM. <\/p>\n\n\n\n

Document Object Model \u00e9 uma plataforma que representa como as \nmarca\u00e7\u00f5es HTML (entre outras) s\u00e3o lidas e organizadas pelo navegador que\n voc\u00ea usa. Depois que s\u00e3o carregadas (indexadas) as marca\u00e7\u00f5es se \ntransformam em elementos de \u00e1rvore, que podemos manipular via API.<\/p>\n\n\n\n

Entender como essa \u00e1rvore \u00e9 constru\u00edda possibilita que possamos criar c\u00f3digos CSS e Javascript mais perform\u00e1ticos, por exemplo.<\/p>\n\n\n\n

Voltando ao Shadow DOM, ele cria um DOM Fantasma<\/em>, \nencapsulado (dentro) do elemento customizado que criamos e \u00e9 renderizado\n de forma separada do DOM principal. \u00c9 esta tecnologia que permite \nmanter os recursos do elemento customizado privados, podendo escrever \nCSS e Javascript sem causar conflitos em outras partes do documento. <\/p>\n\n\n\n

Templates HTML<\/h3>\n\n\n\n

Para escrever os componentes temos os elementos <template><\/code> <\/em>e <slot><\/code> <\/em>que permitem criar templates de marca\u00e7\u00e3o que n\u00e3o ser\u00e3o exibidos na p\u00e1gina mas poder\u00e3o ser reutilizadas se tornando modelo da estrutura de componentes customizados.<\/p>\n\n\n\n

Mas realmente j\u00e1 d\u00e1 pra usar?<\/h2>\n\n\n\n

A mais de 6 anos eu leio e ou\u00e7o que os web components s\u00e3o o futuro, \nmas atualmente v\u00e1rias das features j\u00e1 funcionam nos browsers, ent\u00e3o, web\n components s\u00e3o o presente! Vamos dar uma olhada no Can I use<\/a><\/em> e ver como est\u00e1 a compatibilidade dos navegadores com essas funcionalidades.<\/p>\n\n\n\n

Em geral, web components s\u00e3o adotados por padr\u00e3o no Firefox (a partir da vers\u00e3o 63), Chrome, Opera e Edge (vers\u00e3o 80). Safari suporta apenas algumas features (\u00ea Apple \u2013\u2018).<\/p>\n\n\n\n

\"\"<\/a>
Compatibilidade Custom Elements<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Compatibilidade Shadow DOM<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Compatibilidade HTML templates<\/figcaption><\/figure>\n\n\n\n

Crash Course – Desenvolvendo Web Components<\/h2>\n\n\n\n

1. Desenvolvendo primeiro web component<\/h3>\n\n\n\n

ALERT<\/strong>: Pra acompanhar melhor o tutorial a seguir, \u00e9 importante que voc\u00ea tenha conhecimento b\u00e1sico em HTML, CSS e Javascript.<\/p>\n\n\n\n

1.1 Criar p\u00e1gina HTML<\/h4>\n\n\n\n