Por definição, “Web Components é uma suíte de diferentes tecnologias que permite a criação de elementos customizados reutilizáveis — com a funcionalidade separada do resto do seu código — e que podem ser utilizados em suas aplicações web”. Na prática, eles são uma nova versão de um conceito mais antigo: a proposta de reaproveitar elementos no desenvolvimento de páginas. Isso simplifica tanto o processo de criação quanto o de manutenção, uma vez que alterações realizadas em um componente são replicadas em todas as instâncias em que ele é referenciado.
O que diferencia os Web Componentes dos SSI (Server-Side Includes) de antigamente é que a solução atual é executada a nível de cliente, através de JavaScript e seus frameworks (ou outras tecnologias), enquanto aquela era executada a nível de servidor, como o próprio nome implica. Porém, se quiser renderizar o Web Componentes no servidor, também é possível. Na última década, uma profusão de frameworks mudou o paradigma de desenvolvimento e tornou os Web Components possíveis, mas os objetivos finais são os mesmos: gerar conteúdo reutilizável e independente para a web.
Dave Rupert é um dos fundadores da Luro, desenvolvedor líder na Paravel e um dos apresentadores do podcast ShopTalk. Em um artigo publicado na internet, ele compartilha alguns truques e dicas pouco conhecidos a respeito de Web Components e que podem ser bastante úteis na hora de trabalhar com a tecnologia.
Com sua autorização, traduzimos e reproduzimos o artigo na íntegra:
“Essa semana finalizei meu curso de Frontend Masters Web Components. Para fazer um marketing comemorar essa conquista, eu queria compartilhar ~7 dicas e truques que aprendi preparando meu curso ou sinto que não são super óbvios sobre Web Components.
1) Você pode manipular adereços diretamente em um elemento Lit
Isso pode ser algo que só eu faria, mas se você fizer um elemento com Lit que exponha suas propriedades, você pode editar essas propriedades externamente usando querySelector.
<my-counter counter="3"></my-counter>
<script>
const myCounter = document.querySelector('my-counter')
myCounter.counter = 10
</script>2) :host-context permite que você estilize um elemento com base em seu pai
Você pode usar :host-context() para estilizar um elemento com base em seu pai. Seu HTML pode ficar assim:
<my-element></my-element> <div class="card"><my-element></my-element></div>
No seu CSS dentro do Web Component, você tem algo assim:
:host-context(.card) { background:pink; }
:host-context(.card)::after { content: 'I'm in a card' }3) ShadowDOM declarativo
<my-element> <template shadowroot="open"> <p>I'm a spooky skeleton screen 💀</p> </template> </my-element>
O Shadow DOM declarativo permite a renderização de Web Components no lado do servidor, mas uma coisa que não está clara é o seu modelo embutido e os componentes reais do modelo podem ser totalmente diferentes. Veja o exemplo.
4) Open WC tem um iniciador de projeto
Se você está procurando por um create-react-app para Web Components, o pessoal da Open WC tem o que você precisa.
npm init @open-wc
Você obtém muito com isso (servidor local, configurações de teste, um livro de histórias, configuração de rollup de produção, etc), mas minha parte favorita é do arquivo de teste do componente de amostra: ele executa uma auditoria de acessibilidade em seu Shadow DOM!
it('passes the a11y audit', async () => {
const el = await fixture(html`<custom-element></custom-element>`);
await expect(el).shadowDom.to.be.accessible();
});Acessibilidade instantânea! Bacana.
5) Você pode “renomear” os componentes de outras pessoas.
Deseja misturar e combinar componentes de diferentes sistemas de design, mas manter uma estrutura de nomenclatura consistente em sua empresa? Você pode importar um componente e “renomeá-lo” ou até mesmo adicionar funcionalidades.
import { CoolButton } from 'cool-design-system'
class OurButton extends CoolButton {
constructor { super() }
}
customElements.define('our-button', OurButton)6) Os Guias de Publicação do Open WC são legais
O grupo OpenWC também tem algumas boas diretrizes da comunidade para publicação de Web Components.
✅ Publique o EcmaScript padrão mais recente
✅ Publique o padrão Módulos ES
✅ Inclua “main”: “index.js” e “module”: “index.js” em seu package.json
✅ Exporte classes de elementos
✅ Exporte os efeitos colaterais separadamente
✅ Importe módulos de nó de terceiros com especificadores de importação “nus”
✅ Inclua extensões de arquivo nos especificadores de importação❌ Não otimize
❌ Não agrupe
❌ Não minifique
❌ Não use extensões de arquivo .mjs
❌ Não importe polyfills
Isso é útil e esperamos que forneça uma experiência consistente, permitindo uma história de agrupamento consistente e evitando problemas estranhos que podem ocorrer ao tentar usar os Web Components de outras pessoas em seu projeto.
7) Você não precisa construir ferramentas até o último minuto
Se você quiser escrever Web Components, você pode escrever componentes web básicos e usar Módulos ES para juntá-los. Você pode usar uma biblioteca de componentes da Web como Lit com uma instrução de importação apontada para skypack.dev ou unpkg.com. É super útil começar com zero ferramentas.
Se você quiser instalar pacotes fora do npm… você pode tentar Import Maps… mas, caso contrário, você precisará de um servidor de desenvolvimento local (vite ou @web/dev-server) que suporte “especificadores de importação simples”.
É apenas quando vai para a produção que você precisa de ferramentas específicas para as necessidades do seu site. O TypeScript é opcional, o empacotamento é opcional, o código de redução é opcional. Do ponto de vista do Web Component, todas essas são consideradas “preocupações no nível do aplicativo” que acontecem no momento da implantação.
Exemplos de scripts de compilação de rollup estão disponíveis, mas os Web Components não descrevem como construir seu aplicativo, eles não prendem o desenvolvedor a uma arquitetura. Pode ser um SPA (aplicativo de página única) com uma árvore inteira, mas os Web Components também funcionam bem em uma arquitetura MPA (aplicativo de várias páginas). Cabe a você e seu aplicativo descobrir o que se encaixa melhor.”
Publicado originalmente como “7 Web Component Tricks” em 14 de abril de 2022. Traduzido e republicado com autorização do autor.
