Estructura base de nuestro componente

Aquí pueden encontrar la imagen 😃

@degranda ¿existe algún plugin o forma para syntax highlight para los string literal de estilos y html? me ha parecido bastante tedioso trabajar así y creo que se vuelve aún más tedioso cuando el code base va incrementando. He buscado mucho pero no encuentro algo aún. (Para Vs-code o Atom)

Hice el scaffolding de una card mas que nada para poder entender desde cero el tema del ciclo de vida del web component.
https://github.com/ferdroid8080/b-card-wc
De igual manera puedes usar esta card en tu proyecto instalandolo con npm i b-card-web-component 👀
Y por supuesto estaria encantado de recibir pull requests al repositorio. 💚

Se que es doble trabajo pero yo primero genero el componente y sus estilos como se hace comunmente y luego lo cargo al archivo js

https://raw.githubusercontent.com/degranda/curso-web-components/main/Proyecto/imgs/nike-blue.png

Bien, al menos puedo decir que empezamos casi igual la base del proyecto jaja

Para no tener que desplazarse con la barra horizontal para ver toda la línea de código, usa ALT +Z y esto ajustará la vista al ancho de la ventana de tu archivo. De nada : D

.