Inyección de Datos en Componentes Web Reutilizables
Contenido del curso
Cristopher Sahagún
Héctor Iván Sáenz Estrada
Misael Valdez
Nicolas Alvarez Tobon
Janet Guadalupe Torres Ménera
Kenneth Angulo L
Andres Menchaca
Julieta Gallego
César Andrés Aguilar Párraga
Carlos Rodríguez
Ivan David Martinez Baron
Rodrigo Josue Goitia Quiroga
Moises Hernandez
Diego Andres Cardenas Caro
Néstor Raúl Guzmán Díaz
Cristian Alejandro Perez Dejoy
Luis Alejandro Vera Hernandez
Dario Mendoza
Nilson Diaz
Omar Rivas
Roberto Nava Chimal
Kenneth Angulo L
Kenneth Angulo L
Laura Daniela Gutierrez parra
Juan Luna
Rodrigo Josue Goitia Quiroga
Alejandra Sarahí Monroy Vélazquez
Si observaron la consola, lo más probable es que les haya salido este error
Uncaught RangeError: Maximum call stack size exceeded. at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16) at HTMLElement.attributeChangedCallback (product-card.js:16)
Esto se debe a que estamos utilizando el atributo "title" y este ya es un atributo nativo de HTML por lo que la solución es simplemente cambiar el nombre de nuestro atributo.
Hace varias clases me salió el mismo error. La manera en que yo lo solucione fue agregar una condición extra al if
if(attr === "title" && oldVal !== newVal) { this.title = newVal }
Con esto quedó solucionado el problema para mi. Espero a alguien más le pueda servir. Saludos!
Que crack la verdad ni idea de porque me salía ese error.
Para ahorrarse hacer muchos if pueden hacer esto:
static get observedAttribute() { return ['img', 'name', 'price', 'description', 'colllection']; } attributeChangeCallback(attr, oldValue, newVal) { const attributes = productCard.observedAttribute; if (attributes.includes(attr)) { this[attr] = newVal; } }
Si queremos agregar otro atributo al componente solo sería agregarlo al observedAttribute y no tener que añadir otra condición.
Hecho
Que buen diseno !
No hay link para los retos 🙋🏽♂️
He aquí el repo
Aquí están, tranquilo, sé que los estabas buscando
getStyles() { return ` <style> :host{ --primary-bg: #5a6cb2; width: 90%; max-width: 900px; min-width: 280px; } .container { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: 900px; height: 600px; margin: 20px; background-color: #fff; } .container .imgBox{ position: relative; display: flex; justify-content: center; width: 50%; height: 100%; background-color: var(--primary-bg); } .container .imgBox:before { position: absolute; top: 20px; left: 20px; font-size: 3em; font-weight: 800; color: #000; content: "Nike"; opacity: 0.1; } .container .imgBox img{ position: relative; top: 100px; left: -50px; width: 720px; height: 480px; transform: rotate(-30deg); } .container .details{ display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; box-sizing: border-box; padding: 80px; } .container .details h2{ margin-bottom: 25px; font-size: 2.5em; line-height: 0.8em; color: #444; } .container .details button{ margin-top: 35px; float: right; padding: 15px 20px; font-size: 16px; color: #fff; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; border-radius: 40px; background-color: #5a6cb2; cursor: pointer; } @media (max-width: 1023px) { .container{ height: auto; width: auto; } .container .imgBox{ padding: 40px; width: 100%; box-sizing: border-box; height: auto; text-align: center; } .container .imgBox img{ width: 430px; top:80px; height: auto; transform: rotate(-38deg); } .container .details{ width:100%; height: auto; padding: 20px; } .container .details p{ max-width: 100%; margin-left: 0; } } </style> `
Cuando usar slot y cuando suar atributos?? Por qué aquí solamente se agregaron atributos más no slots??
Los atributos se usan cuando el componente es sencillo y lo que quieres enviar es simple, como texto, rutas, etc.. Los slots tienen la versatilidad que se puede enviar de todo incluso html u otro componente haciendo más flexible aún nuestro componente.
Les comparto el código del componente al inicio de la clase:
class productCard extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } getTemplate(){ const template = document.createElement("template"); template.innerHTML = ` <main class="container"> <section class="imgBox"> <img src="./imgs/nike-blue.png" alt="Zapatos deportivos para correr color azul"/> </section> <section class="details"> <div class="content"> <h3>Hola mundo</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quod deserunt itaque alias delectus earum, quis repellat veritatis ad temporibus ex recusandae quasi rem! Cumque sequi rem nam vero saepe!</p> <h4>$300 USD</h4> <button>Comprar</button> </div> </section> </main> ${this.getStyles()} `; return template; } getStyles() { return ` <style> :host { --primary-background: #5a6cb2; width: 80%; max-width: 900px; min-width: 280px; margin: 0 auto; } .container { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: 900px; height: 600px; margin: 20px; background-color: #fff; } .container .imgBox { position: relative; display: flex; justify-content: center; width: 50%; height: 100%; background-color: var(--primary-background) } .container .imgBox:before { position: absolute; top: 20px; left: 20px; font-size: 8em; font-weight: 800; color: #000; content: 'Nike'; opacity: 0.1; } .container .imgBox img { position: relative; top: 100px; left: -50px; width: 720px; height: 480px; transform: rotate(-30deg); } .container .details { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; box-sizing: border-box; padding: 40px; } .container .details h2 { margin-bottom: 25px; font-size: 2.5em; line-height: 0.8em; color: #444; } .container .details h2 span { font-size: 0.4em; text-transform: uppercase; letter-spacing: 2px; color: #999; } .container .details p { max-width: 85%; margin-left: 15%; margin-bottom: 35px; color: #333; font-size: 15px; } .container .details h3 { float: left; font-size: 2.5em; color: #a2a2a2; } .container .details button { margin-top: 35px; float: right; padding: 15px 20px; font-size: 16px; color: #fff; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; border-radius: 40px; background-color: #5a6cb2; cursor: pointer; } @media (max-width: 1080px) { .container { height: auto; width: auto; } .container .imgBox { padding: 40px; width: 100%; box-sizing: border-box; height: auto; text-align: center; } .container .imgBox img { left: initial; width: 100%; height: auto; transform: rotate(0deg); } .container .details { width: 100%; height: auto; padding: 20px; } .container .details p { max-width: 100%; margin-left: 0; } } </style> `; } render(){ this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)); } connectedCallback(){ this.render(); } } customElements.define("product-card", productCard);
Así quedo mi diseño:
Como en nuestro componente de proyecto solo estamos recibiendo las propiedades desde el html, lo hice de una manera mas simple, pero igualmente valida, simplemente obteniendo los atributos de la data que necesito en el constructor, y funciona bien para el resultado que esperamos.
Para los elementos que están en el componente y que necesitamos que realicen alguna acción ¿como es la manera optima de aplicar los eventos a los componentes?
Que genial 😃
Creo que seria mejor si lo hiciéramos desde 0
Hey!, al momento de utilizar atributos nativos de html para nuestro componente se suele generar este error en la consola como lo muestran algunos compañeros en otros comentarios
Uncaught RangeError: Maximum call stack size exceeded.
si bien se puede cambiar simplemente el atributo por otro En este enlace pueden encontrar algunas explicaciones de porque se genera ese problema y como solucionarlo ;)
Deje el link de la rama equivocada este es el bueno Nike
Buen curso. Pero no veo los recursos para las practicas... que mencionan al final.
¿Cuál es la mejor forma de inyectar datos?
La estrategia más eficiente y limpia para poblar tu componente con información dinámica es utilizar Template Literals (las comillas invertidas o backticks `) combinados con las propiedades de tu clase.
En lugar de hacer complejas selecciones del DOM con document.querySelector para cada pequeño nodo de texto, puedes estructurar todo tu HTML como un gran string literal. Dentro de este string, utilizas la sintaxis ${this.propiedad} para incrustar directamente los valores que capturaste de los atributos. Por ejemplo, un <h2 class="title">${this.title}</h2> se actualizará automáticamente con el valor correcto al momento de renderizar. Esta técnica no solo hace que tu código sea inmensamente más legible, sino que simula el comportamiento de frameworks modernos como React o Vue, manteniendo todo nativo, ligero y fácil de mantener a medida que tu componente crece en complejidad.
¿Cuándo debo usar attributeChangedCallback en componentes?
Debes implementar attributeChangedCallback exactamente en el momento en que necesites que tu componente reaccione en tiempo real a las modificaciones de sus atributos en el HTML.
Imagina que tienes una tarjeta de producto y el usuario cambia la moneda de pago; el atributo price se actualiza en el DOM. Este método captura ese evento instantáneamente. Recibe tres parámetros clave: el nombre del atributo, el valor anterior y el valor nuevo. Gracias a esto, puedes escribir lógica condicional muy precisa. Por ejemplo, puedes verificar si el nuevo valor es diferente al viejo antes de forzar un re-renderizado del componente, ahorrando memoria. Es el puente perfecto entre el HTML estático y la reactividad de JavaScript, permitiendo que tu componente se comporte como una pieza viva que se adapta a los datos que recibe de una API o de la interacción del usuario.
se pueden actualizar los atributos desde js?
Buenas ¿Cómo comunicarse entre componentes?, es decir quiero poder cambiar funcionalidades de un componente a través de lo que pase en otro. Por ejemplo tengo un componente 'formulario', y un componente pages, que através de un enrutador te muestra [home, game, scores] estamos en el componente pages/home, que contiene al componente 'formulario' cuando rellena un nombre y es validado al enviar, te deja acceder a pages/game.
Hola Juan, en general para la comunicación entre componentes pueden existir muchas estrategias. Eventualmente, estos componentes pueden importar funciones, clases y utilizar otros componentes. Entonces se puede generar muchas formas de comunicación entre componentes Te invito a investigar como lo hacen diferentes frameworks y como existen diversas formas de hacerlo. ¿Te interesaría un curso para profundizar sobre Web Componentes con JavaScript?
Hola, no se si te sirva pero para que comuniques tus componentes puedes usar el 'dispatchEvent()' donde lo uses será el componente desde el cual dispares el evento, el cual va a escuchar el padre del mismo y en este podrás hacer una función para manejar que se hará.
