Como funciona a Componentização Vídeo
Falaaaa galeraaa, então fiz um vídeo para tentar explicar oque eu aprendi sobre componentização.
É o segundo vídeo que eu gravo pessoal, estou tentando melhorar essa técnica de gravar vídeos, que parece ser simples, mas é bem complicada kkkk.
Espero que o vídeo tire algumas dúvidas, e venha somar no conhecimento de vocês.
Vou deixar todo o código aqui para vocês também.
Arquivo JavaScript
class ClassCard extends HTMLElement {
constructor() {
super()
const documentShadow = this.attachShadow({ mode: 'open' })
const style = document.createElement('style')
documentShadow.innerHTML = `
<div class="container">
<div class="container__content-img">
<img class="content-img" src="assets/img/Sem título.png" alt="logo ímã">
</div>
<div class="container__content-description">
<p><span> 13/12</span>, <span>19h </span></p>
<h3>${this.getAttribute('title') || 'Titilo padrão'}</h3>
<p>${this.getAttribute('description')}</p>
</div>
</div>
`
style.textContent = `
/*Card-Component*/
*{
padding:0;
margin:0;
box-sizing:borde-box;
}
.container {
font-family: sans-serif;
border: 1px solid #ccc;
border-radius: 10px;
}
.container__content-img {
width: 100%;
}
.content-img {
width: 100%;
border-radius: 10px 10px 0px 0px;
}
.container__content-description {
display: flex;
flex-direction: column;
padding: 10px;
gap:10px
}
`
documentShadow.appendChild(style)
}
}
customElements.define('class-card', ClassCard)
Arquivo HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Criando Componentes</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/components/class-card.js" defer></script>
</head>
<body>
<class-card title="Aula de componentização" description="Entendendo como funciona a componentização"></class-card>
</body>
</html>
Julio @JulioÓtimo material, achei bem interessante por você ter mostrado como é feito na forma pura em JS.
Única coisa que seria válido de adicionar, é observar que o Angular, Vue, React, entre outros, faz todo esse trabalho por de baixo dos panos, o que facilita muito a vida do desenvolvedor, abstraindo muitos conceitos. Vale ressaltar que nem todos usam a shadow DOM, React por exemplo utiliza virtual DOM, mas é o mesmo conceito.
- GEm resposta aMarcusVogado⬆:José Guilherme Duarte Abrantes @guilhduarte
Parabéns @MarcusVogado pelo post, vou só deixar aqui um material extra sobre esse tipo de estrutura e sobre o customElements, que é uma API nativa do Browser para esse tipo de personalização, de um site que é meu favorito quando o assunto é JavaScript: https://javascript.info/custom-elements
Em resposta aMarcusVogado⬆:Matheus V. Zarpellon @matheuszarpellonQue massa! Eu nunca tinha visto componentes na prática, com HTML/JS puro, muito interessante! Obrigado @MarcusVogado!
Em resposta aMarcusVogado⬆:Gabriel Torres Ribeiro do nascimento @gabrieltrnficou top esse video parabéns marcus , foi de grande ajuda nos estudos
Em resposta aMarcusVogado⬆:Luiza Ferreira @luizaferreirafonsecaAdorei! Obrigada pela ótima explicação, Marcus!
- PEm resposta aMarcusVogado⬆:Pétrus Teixeira @Petrus_Goncalves
Excelente aula Marcus, esclareceu demais.
- BEm resposta aMarcusVogado⬆:Bianca Cristina Oliveira do Espirito Santo @Bianca
Show, obrigada por compartilhar Marcus!!
Em resposta aMarcusVogado⬆:Natália Stoll Nogueira @nataliastollFicou demais!!! Bem legal ver esse funcionamento.
- TEm resposta aMarcusVogado⬆:Tatiane Tinoco @tatianetinoco
Uau .... Adorei a ideia do vídeo. Muito bom de acompanhar a explicação.
Em resposta aMarcusVogado⬆:Nadielly Medeiros @NadiellyParabéns Marcus, ficou muito boa a explicação. Assim muitos podem ver na prática como funciona