Web Components de forma correta

[devigor]

Eu gostaria de saber a maneira correta de se usar Web Components e como usá-los de forma exagerada pode prejudicar o site.

[felipefialho]

c/c @zenorocha 😃

[victormiguez]

@gabriel-ribeiro-ir

[notnotgabriel]

Opa! Já invocaram o mestre dos web components @zenorocha aqui, mas acho que posso complementar com o pouco que eu sei.

@devigor web components são um conjunto 4 tecnologias da plataforma web:
Custom elements, HTML imports, Templates e Shadow dom.

Cada um destes caras são responsáveis por coisas diferentes, portanto cada um tem suas "best practices".
Algumas que aplico e que posso recomendar para você são:

• Nomeie seus Customs elements com um traço "-" por ex: <my-list>;
• Faça seus components se comportarem como os elementos nativos já existentes, evite lançar erros de JS (falhe silenciosamente);
• Use atributos para entrada de dados, e eventos para saída;
• Inclua todas as dependências que o seu componente usa, mesmo que pareça redundante. Se você configurar os headers de cache certinho eles serão baixados somente uma vez;
• Documente seu componente (Polymer faz isso tão lindamente!);

Estas e outras dicas mais detalhadas você pode ver no webcomponents.org

Atenção ao suporte! Web components são specs "novas", verifique o suporte do que você vai utilizar e adicione os polyfills necessários.

Usar web components de forma exagerada não vai prejudicar o seu projeto, desde que eles estejam feitos da melhor maneira possível.
Aqui na Ingresso Rápido temos clients inteiros usando web components, e até o momento os projetos estão Awesome!

E desculpa a demora pela resposta, final de ano sabe como é né?! 😋

[suissa]

Comofas?

[gabrieldarezzo]

Eu tava navegando no hipsters e lembrei dessa issue assim q vi ;)

Só não vale usar um <center></center> igual o @peas HSAUhsauSAHUsha

http://hipsters.tech/web-components-hipsters-06/

[peas]

@gabriel-ribeiro-ir center é amor

[notnotgabriel]

@peas marcou o Gabriel errado kkk
Mas concordo, nao seria hipster true sem usar tag hipster kkkk