DEV Community:

Decorator @define: O Feitiço supremo para turbinar seus Custom Elements!

Thu, 31 Oct 2024 13:08:27 +0000

E aí, galera dev! Prontos pra uma magia mais poderosa que um loop infinito de café? ☕ Hoje vamos desvendar o segredo dos mestres Jedi do front-end: o decorator @define. Preparem-se para códigos tão lindos que vão fazer até o Linus Torvalds chorar de emoção! 😢

🎭 O que é esse tal de @define?

Imagine só: e se você pudesse definir Custom Elements com o mesmo swag que o Tony Stark veste a armadura do Homem de Ferro? Pois é, meus caros Padawans do JavaScript, o @define é exatamente isso!

import { define } from '@bake-js/-o-id';

@define('botao-camaleao')
class BotaoCamaleao extends HTMLElement {
  // Código mágico aqui
}

Simples assim! Mais fácil que achar um ';' perdido no código, não é mesmo? 😉

🧠 Como Funciona essa Bruxaria?

Vamos dar uma espiada nos bastidores dessa mágica:

const define = (name, options) => (constructor) => {
  customElements.get(name) ?? customElements.define(name, constructor, options);
};

Esse pedacinho de código é mais esperto que um if...else numa sexta-feira à tarde:

Ele verifica se o elemento já existe (nada de definir o mesmo elemento 500 vezes, né?).
Se não existir, BAM! Define o elemento na hora, sem dar chance pro garbage collector pensar duas vezes.

🚀 Por que isso é mais revolucionário que a invenção do ctrl+c ctrl+v?

DRY como o deserto do Saara: Nada de repetir customElements.define toda hora. Seu código fica mais seco que piada de padeiro!
Sintaxe açucarada: É tipo colocar Nutella no seu JavaScript. Fica irresistível!
Organização nível Marie Kondo: Mantém a definição do elemento junto da classe. Satisfaction 100%!
Flexibilidade de ninja: Quer estender elementos nativos? É só passar as options:

   @define('super-button', { extends: 'button' })
   class SuperButton extends HTMLButtonElement {
     // Código supimpa aqui
   }

🛠️ Como Usar Esse Poder Na Sua App

Primeiro, instale a lib dos deuses:

   npm install @bake-js/-o-id

Importe o poder supremo:

   import { define } from '@bake-js/-o-id';

Decore suas classes como se não houvesse amanhã:

   @define('element-toppen')
   class ElementToppen extends HTMLElement {
     constructor() {
       super();
       this.innerHTML = `<p>Eu sou inevitável!</p>`;
     }
   }

Use no seu HTML e veja a mágica acontecer:

   <element-toppen></element-toppen>

🎉 Seja o Mago Supremo dos Custom Elements!

Com o @define, você está pronto pra criar componentes tão épicos que até o JavaScript vai pedir seu autógrafo. É tipo ter um sabre de luz no mundo do front-end!

Lembre-se: com grandes decorators vêm grandes PRs aprovados. Use com sabedoria e faça seus componentes brilharem mais que um console.log() no meio da noite!

Quer mais dessa magia? Corre lá no GitHub da @bake-js/-o-id e dá aquela ⭐️. É tipo um high-five virtual pro dev que fez essa magia acontecer!

Agora vai lá e faz a web tremer, jovem Padawan! May the @define be with you! 🚀✨

Custom Elements Unleashed: Dominando customElements.define() e .get() como um Jedi do Front-end!

Wed, 30 Oct 2024 11:38:52 +0000

E aí, galera dev! Prontos pra desvendar os segredos do universo dos Custom Elements? Hoje vamos mergulhar fundo nos poderes de customElements.define() e customElements.get() - as armas secretas que todo Jedi do front-end precisa dominar!

🛠️ customElements.define(): Criando seu próprio Pokémon... quer dizer, Elemento!

Imagina que você é um cientista maluco do front-end e quer criar sua própria criatura HTML. É aí que entra o customElements.define(). Ele é tipo aquela máquina de clonagem do Mewtwo, só que pra elementos web!

class ElementoTopzera extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<p>Eu sou incrível e customizado!</p>`;
  }
}

customElements.define('elemento-topzera', ElementoTopzera);

Agora você pode usar seu elemento como se fosse nativo do HTML:

<elemento-topzera></elemento-topzera>

BOOM! 🎆 Você acabou de criar vida... no DOM!

🧙‍♂️ Exemplos mágicos pra impressionar seus amigos devs

O Botão Contador Imagine um botão que conta quantas vezes foi clicado. É tipo um scorecard pra sua paciência em debugar!

class BotaoContador extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.innerHTML = `
      <button>Cliques: <span>0</span></button>
    `;
    this.addEventListener('click', () => {
      this.count++;
      this.querySelector('span').textContent = this.count;
    });
  }
}

customElements.define('botao-contador', BotaoContador);

O Card de Perfil Um card de perfil que é mais customizável que um personagem de RPG!

class CardPerfil extends HTMLElement {
  constructor() {
    super();
    const nome = this.getAttribute('nome') || 'Dev Anônimo';
    const skill = this.getAttribute('skill') || 'Café++';

    this.innerHTML = `
      <div style="border: 2px solid #333; padding: 10px; margin: 10px;">
        <h2>${nome}</h2>
        <p>Skill Suprema: ${skill}</p>
      </div>
    `;
  }
}

customElements.define('card-perfil', CardPerfil);

Usa assim, ó:

<card-perfil nome="ZézimDev" skill="Bug Hunter"></card-perfil>

🕵️‍♂️ customElements.get(): O Sherlock Holmes dos Elementos

Agora, e se você quisesse investigar se um elemento customizado já existe? É aí que entra o customElements.get() - o detetive particular do mundo dos Web Components!

const ElementoTopzera = customElements.get('elemento-topzera');

if (ElementoTopzera) {
  console.log('Elemento encontrado! Hora do show!');
  // Faz alguma mágica aqui
} else {
  console.log('404 Elemento Not Found');
}

🕹️ Use cases mais maneiros que um arcade dos anos 80

Lazy Loading de componentes Carregue componentes só quando precisar, economizando mais memória que um programador tentando lembrar onde colocou o ponto e vírgula:

function carregaComponenteSeNecessario(nomeElemento) {
  if (!customElements.get(nomeElemento)) {
    import(`./components/${nomeElemento}.js`)
      .then(() => console.log(`${nomeElemento} carregado e pronto pra ação!`))
      .catch(err => console.error(`Oops, deu ruim ao carregar ${nomeElemento}`, err));
  }
}

carregaComponenteSeNecessario('super-tabela');

Verificação de Segurança Confira se algum elemento maligno não está tentando se passar pelo seu:

function elementoSeguro(nomeElemento) {
  const elemento = customElements.get(nomeElemento);
  if (elemento && elemento.prototype instanceof HTMLElement) {
    console.log('Elemento verificado e aprovado! 👍');
    return true;
  }
  console.warn('Elemento suspeito detectado! 🚨');
  return false;
}

elementoSeguro('botao-contador'); // true, se definido anteriormente
elementoSeguro('virus-malicioso'); // false, espero eu! 😅

🎓 Lições dos Mestres Jedi do Front-end

Nomes Únicos: Escolha nomes de elementos que nem usernames de rede social - únicos e com traço no meio!
Verifique Antes: Sempre use customElements.get() antes de definir, pra não causar uma ruptura no espaço-tempo do DOM.
Estenda com Sabedoria: Quer superpoderes extras? Estenda elementos nativos:

   class SuperButton extends HTMLButtonElement {
     // Código supimpa aqui
   }
   customElements.define('super-button', SuperButton, { extends: 'button' });

🚀 Torne-se o Mestre dos Elementos!

Com customElements.define() e customElements.get(), você tá pronto pra criar uma web mais customizada que setup de streamer! Lembra: com grandes poderes vêm grandes oportunidades de criar componentes incríveis!

Agora é com você! Vai lá criar seus elementos e revolucionar a web! E se travar em algum bug, respira fundo e pensa: "O que o Linus Torvalds faria?" 😎🐧

Quer se aprofundar mais nesse multiverso de possibilidades? Dá uma olhada na documentação oficial de Custom Elements no MDN. É tipo o grimório dos feiticeiros do front-end! 📚✨

E aí, dev? Ficou hypado pra criar seus próprios elementos? Compartilha aí nos comentários que elemento maluco você vai criar! Quem sabe na próxima a gente não faz um <caffe-inator></caffe-inator> que transforma código em café! ☕💻

May the code be with you, sempre! 🚀👨‍💻

Web Components: O Vingador secreto do Front-End que vai fazer seu código decolar!

Sat, 19 Oct 2024 21:41:23 +0000

E aí, galera do front-end! Tá na hora de sair da bolha e conquistar a web de vez! 🌐

🕹️ O Power-Up Secreto que Você Nem Sabia que Precisava!

Sabe aquela sensação de quando você descobre um atalho secreto num jogo que muda completamente sua gameplay? Pois é, Web Components são EXATAMENTE isso pro desenvolvimento web! 🤯

🦸‍♂️ Os Vingadores do Front-End: A Guerra Civil que Ninguém Pediu

Homem de Ferro (React): "Eu sou o framework, eu sou!"
Capitão América (Angular): "Eu posso fazer isso o dia todo."
Thor (Vue): "Traga-me o Thanos... ops, quero dizer, os bugs!"
Homem-Formiga (Svelte): "Ninguém me nota, mas sou poderoso!"

E no meio dessa batalha épica... surge o Nick Fury dos Web Components pra unir todo mundo! 🕵️‍♂️

🎭 O Crossover Mais Épico desde "Vingadores: Ultimato"

Imagina só: Você, um dev React, de repente se depara com uma feature ANIMAL em Vue. O que fazer?

😭 Chorar no banho enquanto reescreve tudo?
🧟‍♂️ Criar um Frankenstein de código?
🦸‍♂️ Usar Web Components e integrar como um boss!

Spoiler: A resposta certa é a 3! É tipo misturar Nutella com Ovomaltine - DIVINO! 🍫🥛

🏝️ Ilhas de Interatividade: Seu HTML Agora é um Arquipélago Sensacional!

Páginas estáticas? ✅
Interatividade dinâmica? ✅
O melhor dos dois mundos? TOTAL ✅✅

É como colocar portais do Rick & Morty no seu site. Wubba Lubba Dub Dub! 🌀

🌍 Web Components: O Esperanto que Todo Dev Vai Querer Falar!

Imagina criar um modal tão versátil que funciona em QUALQUER lugar:

Seu mega projeto React? Yep!
O site de portfólio do seu tio em jQuery? Também!
Aquele projetinho secreto em vanilla JS? Claro!

É tipo ter um canivete suíço no cinto de utilidades do Batman. MUITO PODER! 🦇🛠️

🤗🌈 Lição do Dia: Diversidade (de Tecnologias) é Tudo!

Web Components não são o Thanos querendo acabar com metade do universo front-end. São mais os Guardiões da Galáxia: um grupo diverso e maluco que, de alguma forma, faz tudo funcionar MELHOR junto! 🚀👾

🧙‍♂️ Hora de Virar um Mestre Jedi dos Web Components!

Se você ainda não deu uma chance pros Web Components, tá na hora de expandir seus horizontes, jovem padawan. Não vai substituir seu framework favorito, mas vai te dar superpoderes que você nem sabia que queria!

E aí, bora codar um mundo mais unido e interoperável? Deixa nos comentários sua ideia mais INSANA de Web Component! Quem sabe a gente não monta um squad pra salvar o mundo do front-end? 🦸‍♀️🦸‍♂️

Até a próxima, e que a força do JavaScript esteja com você! May the console.log be with you! 🖖💻

Por que ninguém fala de Web Components?

Thu, 17 Oct 2024 10:44:01 +0000

Sabe quando você tá numa roda de devs, a galera começa a falar sobre React, Angular, Vue e até Svelte, mas ninguém menciona Web Components? Isso me deixa encucado 😤. Parece que os Web Components são esse grande elefante branco do desenvolvimento web: eles estão aí, são super poderosos, várias empresas grandes já estão usando... mas ninguém fala sobre eles como deveriam. Então, deixa eu desabafar aqui 🗣️.

"Não Tem Caso de Sucesso!" – Será Mesmo?

Essa é uma das desculpas que mais escuto 🥱. Gente falando: “Ah, mas não tem produto grande que usa Web Components, né?” Como assim, não tem? 😤 Olha ao redor! Grandes players como IKEA, GitHub, Salesforce, até mesmo a Microsoft já usam Web Components em seus sistemas. Sério, se empresas desse calibre confiam nos Web Components pra escalar seus projetos, então tá na hora de parar de ignorar o óbvio 🔥.

O problema é que, diferente do React, que o Facebook coloca lá no alto no pedestal 🏆, ou do Angular, que é o queridinho do Google, Web Components nunca tiveram um marketing bombástico 💥. Então, o pessoal acaba com essa visão distorcida de que “não tem cases de sucesso”. Mas tem, sim! Só não estão jogando na sua cara.

"São Lentíssimos" – Essa Eu Já Ouvi Antes

Outra falácia que me tira do sério: “Web Components são lentos” 🐌. Tá, vamos lá. Web Components não são um framework mágico que resolve tudo no estalar de dedos ✨, mas eles são a base sólida para construir componentes reutilizáveis e isolados. Eles são como um bom prato que cozinha devagar, tipo aquele brisket que fica perfeito depois de horas no forno 🍖. E sim, algumas features podem demorar mais pra ganhar suporte total em todos os navegadores, mas cara, hoje em dia isso é exceção, não regra.

E o mais engraçado: a galera que reclama que Web Components são lentos, muitas vezes tá lidando com bundles gigantescos de frameworks 📦. Web Components, na real, podem te ajudar a reduzir isso, dependendo de como você os usa.

"São Difíceis de Aprender" – Mas Será Que São Mesmo?

A curva de aprendizado... Beleza, eu dou esse ponto pra quem levanta essa questão 🧐. O Shadow DOM e algumas partes mais técnicas dos Web Components podem ser difíceis de engolir à primeira vista 🤔. Mas, honestamente, todo framework ou biblioteca tem uma curva de aprendizado. React não era simples no início (e não é até hoje, dependendo do que você quer fazer) 🤯. Se você tá disposto a aprender React hooks, efeitos colaterais, render props e toda aquela parafernália, então aprender Web Components não deveria ser um obstáculo tão grande assim. É só uma questão de se permitir explorar 🔍.

E o que ninguém fala? Web Components funcionam nativamente nos navegadores 🌐. Ou seja, quando você aprende a mexer neles, tá aprendendo algo que vai durar muito tempo, sem precisar ficar correndo atrás de updates de versões de framework, breaking changes e toda aquela bagunça.

"Ninguém Fala Deles" – Pois Eu Vou Falar!

Se tem uma coisa que me incomoda de verdade é essa cultura de que, se não tá no hype do Twitter ou nas conferências gigantes, a tecnologia “não vale a pena” 🤨. Sinto muito, mas Web Components são incríveis, e o fato de que grandes empresas estão adotando eles só reforça isso 🏢. O ecossistema está crescendo, com novos frameworks como Rocket, Enhance, e Eleventy que estão mostrando como Web Components podem ser uma base forte para aplicações modernas 🚀.

E outra: Web Components são agora. Se você ainda acha que é "tecnologia do futuro" ou algo experimental, desculpa, mas você tá atrasado ⏳. O suporte nos navegadores tá praticamente fechado, os gaps estão sendo preenchidos, e a coisa tá fluindo 📈. Quer apostar? Se você der uma chance agora, daqui a uns anos vai se orgulhar de ter saído na frente da onda 🌊.

Bora Mudar Essa Conversa!

Eu entendo que há resistência 😬. Migrar de um ecossistema sólido como React ou Angular para algo diferente é difícil. Mas a verdade é que Web Components não só são viáveis como estão sendo usados por gigantes 🏆. E se você continuar ignorando, só porque não tem uma fanbase barulhenta como outros frameworks, vai estar perdendo a chance de explorar uma tecnologia que tem tudo para durar 🛠️.

Então, tá na hora de parar com essa visão atrasada e reconhecer o valor real dos Web Components. Eles não são só uma tendência obscura, são uma realidade que já tá rodando em grandes empresas e podem, sim, ser a base para o seu próximo projeto de sucesso ⭐. E aí, vai continuar dizendo que não existem casos de sucesso?

Microsoft está jogando pesado com Web Components e você deveria prestar atenção!

Tue, 15 Oct 2024 01:11:40 +0000

Se você ainda acha que o futuro dos componentes da web tá nos frameworks como React, a galera do Microsoft Edge tá aqui pra dar aquele plot twist! 😱 Isso mesmo! Eles estão trocando nada mais, nada menos, que o React pelos bons e velhos Web Components nativos. E o motivo? Simples: performance e simplicidade.

A equipe de desenvolvimento do Edge, liderada pelo Andrew Ritz, tá focada em turbinar o desempenho do navegador e das web apps. Tudo começou com o lançamento do WebUI 2.0, um projeto que tem como missão transformar cerca de 50% das UIs React do navegador em componentes nativos até o final deste ano. Já pensou o impacto disso? 🔥

E o que rolou?

Eles sacaram que o React tava virando um verdadeiro caos controlado nas UIs do navegador, especialmente em máquinas mais humildes. 😨 Sabe aquele "bundle gigantesco" que todo mundo se acostumou a depender? Pois é, a saída foi voltar às raízes: HTML e CSS, priorizando o markup. Precisou de JavaScript? Só naquelas, com direito a pausa pra um café e consulta com um engenheiro sênior.

Mas por que Web Components?

A pergunta que não quer calar: Por que largar o React e adotar Web Components? A resposta tá no combo: interoperabilidade e estabilidade. 🎯 Ritz e sua equipe cansaram da troca de frameworks e da dependência monstra de JavaScript. Com Web Components, o que você constrói hoje vai funcionar amanhã, sem precisar refatorar tudo quando lançarem um "novo queridinho do frontend".

E vou te contar, os resultados já tão aparecendo! 🌟 Na UI das extensões do Edge, por exemplo, trocar React por Web Components deu um boost de performance sinistro. O tempo de carregamento foi pro espaço e a experiência do usuário subiu de nível!

Mas Web Components não são complicados?

Agora, vem aquela dúvida: Web Components não são difíceis de implementar? Bom, a curva de aprendizado existe, sim. Mas, de acordo com o Ritz, o fluxo de trabalho melhorou consideravelmente, focando no que HTML e CSS nativos podem fazer. O papo entre devs e designers ficou mais direto – todo mundo falando a mesma língua agora! 💪

E o que isso significa pro futuro?

Se até a Microsoft tá dando tchauzinho pro React, o que isso significa pra nós, devs? Bom, o Edge tá mostrando o caminho, e o plano é liberar os pacotes do WebUI 2.0 como open-source em breve, com padrões de plataforma que qualquer dev vai poder usar.

E segura essa: o movimento já começou dentro da Microsoft. A ideia é convencer outros times a entrar na onda dos Web Components. Vai ser interessante acompanhar essa migração e, quem sabe, ver outras gigantes seguindo pelo mesmo caminho!

Então, meu conselho: fica ligado nessa tendência! Web Components podem ser o futuro mais estável e performático que a web precisa. 🌐✨

Agora é a sua vez! Web Components ou React? Em qual lado dessa batalha você aposta? 👀👇

Você está ignorando os Web Components?

Sat, 12 Oct 2024 15:52:21 +0000

Ei, pessoal! 🎉

Vamos bater um papo sobre o que está fervendo no mundo do front-end? 🤫💻

Nos últimos anos, o desenvolvimento front-end passou por transformações significativas. Mas, olha só, muitos dos nossos colegas ainda estão presos a bibliotecas e frameworks tradicionais, como se não tivesse uma revolução silenciosa rolando à nossa volta: os Web Components! 🚀 Enquanto a indústria está surfando numa onda de modularidade e reutilização de código, tem uma galera que tá totalmente alheia a essa evolução crucial.

Neste post, vamos explorar como grandes empresas, de tecnologia a aviação, estão adotando os Web Components, e revelar uma mudança de paradigma que os front-ends teimosamente ignoram. Se prepara, porque você vai enxergar além do que está diante dos olhos e descobrir o futuro do desenvolvimento web! 🌐✨

2011 - O Início da Revolução

Lá em 2011, tudo começou na Conferência Fronteers, onde o Alex Russell chegou todo animado e apresentou a ideia de criar componentes HTML reutilizáveis. A ideia era padronizar como a lógica, a estrutura e o estilo poderiam ser encapsulados em elementos nativos dos navegadores. Olha que genial! 💡 O Google, esperto como sempre, foi uma das primeiras a abraçar essa ideia, começando a integrar Web Components em seus projetos.

2012 - Prototipagem com Polymer

Aí vem 2012 e surge o Polymer! 🎉 Essa biblioteca trouxe um superpoder para a galera: os polyfills! Agora, a turma pode experimentar funcionalidades como Custom Elements, Shadow DOM e HTML Templates antes de serem oficialmente padronizadas. A Adobe também ficou de olho e começou a brincar com a tecnologia, reconhecendo todo o potencial que os Web Components tinham para oferecer.

2013 - Avanços na Especificação

Em 2013, a festa continuou com o trabalho em uma especificação inicial para Custom Elements. A NASA se jogou nessa, usando Web Components em suas interfaces para visualização de dados. Imagina só: enquanto a gente tá de boa aqui, eles estão usando isso para explorar o espaço! 🚀👽

2014 - Polymer Summit e Aumento da Popularidade

Em 2014, rolou a primeira conferência dedicada ao Polymer e a galera começou a mostrar casos de uso de Web Components em projetos do mundo real. O GitHub, que não é bobo nem nada, começou a implementar Web Components em suas ferramentas, aproveitando a modularidade e a facilidade de manutenção que essa abordagem oferecia.

2015 - A Era da Padronização

Chegamos em 2015, e o W3C começou a formalizar as especificações dos Web Components. A Microsoft e a IBM também começaram a explorar essa nova onda, reconhecendo seu potencial para melhorar a interoperabilidade entre produtos. Se não é uma corrida para ver quem chega primeiro! 🏁

2016 - Suporte de Navegadores e Avanços

Em 2016, os navegadores como Chrome e Safari finalmente abriram as portas para os Web Components. E adivinha quem entrou de cabeça? A American Airlines e a Ford Motors começaram a usar essa tecnologia para melhorar a experiência do usuário em seus sites e aplicativos. Olha o poder dos Web Components! 💪✨

2017 - Expansão do Suporte e Adaptação

O Firefox, não querendo ficar de fora, lançou suporte oficial para Web Components em 2017. Com isso, GitLab e Red Hat adotaram a nova tecnologia em suas soluções, mostrando que os Web Components estavam ganhando força.

2018 - A Maturidade dos Web Components

Em 2018, com a migração do Microsoft Edge para o motor Chromium, o suporte robusto se consolidou. Empresas como SpaceX e Scania começaram a integrar Web Components, buscando otimizar a interface e a usabilidade de seus produtos. Eles estavam à frente da curva! 🌟

2019 - Evolução do Polymer para LitElement

E em 2019, o Polymer evoluiu para LitElement, simplificando ainda mais o uso dos Web Components. O GitHub continuou a expandir suas funcionalidades baseadas nessa tecnologia, sempre buscando inovar.

2021 - Consolidação com Lit v2

Com o lançamento do Lit v2 em 2021, as coisas melhoraram ainda mais! 🌈 Empresas como Amazon, Salesforce e Adobe começaram a adotar Web Components em suas plataformas, provando que essa abordagem realmente funciona.

2023 - Adoção Mainstream e Integração

E agora, em 2023, os Web Components estão por toda parte em plataformas como YouTube, GitHub e Adobe. A comunidade também está se mexendo para criar documentação e guias, facilitando a integração dessa tecnologia com os ecossistemas populares de desenvolvimento front-end.

E, adivinha só? Em 2023, já impressionantes 20% dos sites estão utilizando Web Components, segundo dados do Chrome Status. 🧐 Isso mostra que a tecnologia está ganhando terreno e conquistando o coração dos desenvolvedores!

Chrome status

Além disso, o crescimento dos Web Components é palpável na comunidade do Stack Overflow, onde cada vez mais desenvolvedores estão se engajando e compartilhando suas experiências com essa abordagem inovadora. 📈

Stack Overflow

Mas, olha, enquanto os Web Components se tornam rapidamente a norma entre grandes empresas, como Amazon, Apple e Microsoft, muitos desenvolvedores front-end parecem ignorar essa evolução significativa. 😱 A crescente adoção dessa tecnologia não é só uma tendência passageira; é uma mudança fundamental na forma como construímos aplicações web.

É alarmante ver essa epidemia de desatenção no campo do front-end, onde muitos profissionais ficam cegos para as oportunidades que os Web Components oferecem. 🚨 Não deixe essa revolução passar despercebida — comece a explorar os Web Components e descubra como eles podem revolucionar sua abordagem ao desenvolvimento front-end!

Bora lá, time! 💪✨