Contenido del curso
Manejo de Atributos en Componentes Web con JavaScript
¿Cómo manejar datos dinámicos mediante atributos en componentes web?
A lo largo del aprendizaje sobre el manejo de datos en componentes web, hemos explorado distintas técnicas para gestionar información fuera de sus elementos estándar. En esta lección, nos adentraremos en el uso de atributos para manejar datos dinámicos. Esta metodología se basa en que, al tratar los componentes web como etiquetas HTML, podemos usar atributos para pasar información que luego se renderiza internamente, enriqueciendo así la interacción y funcionalidad de las aplicaciones.
¿Qué son los atributos en HTML?
Los atributos en HTML son especificaciones que permiten modificar el comportamiento y estilo de las etiquetas. Ejemplos comunes incluyen class, id, y atributos de medios como src para imágenes. En el contexto de componentes web, podemos definir atributos personalizados que faciliten la transferencia de datos.
Pasos para implementar atributos en componentes web
Para integrar la funcionalidad de atributos en componentes web, sigue estos pasos:
Quitar elementos slot: Comienza eliminando las etiquetas de slot en los elementos como párrafos o encabezados, dejándolos vacíos para recibir datos posteriormente.
Añadir elementos multimedia: Integra etiquetas para imágenes o videos, definiendo sus fuentes o src.
Crear variables con getAttribute: Dentro del elemento JavaScript del componente, crea variables para cada atributo que deseas manejar, utilizando getAttribute para obtener el valor.
this.title = this.getAttribute('title'); this.paragraph = this.getAttribute('paragraph'); this.imgSrc = this.getAttribute('img');
Actualizar el template: Usa las variables definidas en el template del componente para inyectar los valores obtenidos de los atributos.
`<h2>${this.title}</h2> <p>${this.paragraph}</p> <img src="${this.imgSrc}" alt="Imagen">`
Definir valores en el HTML: En la instancia del componente en el HTML, establece los atributos creados con sus correspondientes valores.
<my-component title="Este es el título" paragraph="Este es el párrafo" img="logo.png"></my-component>
Ventajas del uso de atributos en componentes web
El uso de atributos en componentes web presenta múltiples beneficios:
¿Cómo evolucionar hacia un control más avanzado?
Aunque configurar atributos en componentes web es sencillo y efectivo, existe una forma aún más robusta para manejar cambios: el ciclo de vida attributeChangedCallback. Este ciclo monitorea cambios en los atributos, permitiendo reacciones adecuadas y actualizaciones en tiempo real. En futuras clases, nos centraremos en este aspecto para dotar a tus componentes de una capacidad de gestión de cambios aún más precisa y eficiente. ¡Sigue aprendiendo y expandiendo tus habilidades en desarrollo web!
Rony Porraz Vargas
Estudiante
Jimmy Buriticá Londoño
EstudianteEntre Slot y Atributos, prefiero usar los Atributos. Es muy similar a una etiqueta estándar HTML5.
Nazareno Aznar Altamiranda
EstudianteAdemás de que el hecho de colocar etiquetas diferentes en el archivo JS y el HTML pueden causar conflictos en nuestra página. Para evitar que se pisen las etiquetas es mejor utilizar atributos
Christian Alvarenga
EstudianteEstoy fascinado con este curso.
Uriel Mojica Mejía
EstudianteCreo que es mucho mejor usar atributos en lugar de slots, es mas limpia y mejor estructurada
Andres Felipe Pinchao Ramirez
EstudianteMY NOTES FOR ATTRIBUTES :D En esta clase veremos formas de manejar datos dinámicos por fuera de nuestro componente.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>Hola mundo again</h3> <!-- Establecemos los atributos que vamos a obtener del componente--> <my-element title="soy un titulo" parrafo="soy el texto del parrafo" img="https://web-components-resources.appspot.com/static/logo.svg"></my-element> <script type="module" src="./my-elements.js"></script> </body> </html>
js
class myElement extends HTMLElement{ constructor(){ super(); this.attachShadow({mode:"open"}); //inicializamos unas variable para generar el match y obtener //El atributo de la etiqueta this.title = this.getAttribute('title'); this.parrafo = this.getAttribute('parrafo'); this.img = this.getAttribute('img'); } getTemplate(){ const template = document.createElement('template'); //Quitamos los slots para probar los otros metodos de datos dinamicos //Utilizamos las variables que inicializamos para obtener los atributos //De las etiquetas dentro del template template.innerHTML = ` <section> <h3>${this.title}</h3> <div> <p>${this.parrafo}</p> <img src="${this.img}"> </div> </section> ${this.getStyles()} `; return template } getStyles(){ return` <style> h2{ color:red; } </style> ` } render(){ this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)) } connectedCallback(){ this.render(); } } customElements.define('my-element', myElement);
Luis Daniel Hernández Guevara
EstudianteLos Web Components son lo mejor!!! lml
Jose Ramon Moreno Sanchez
EstudianteLos componentes me ayudaran a trabajar con frameworks como Vue o React, o es para no usarlos?
Héctor Eduardo López Carballo
EstudianteHola!
De hecho es algo que se menciona en el módulo de este curso "Introducción a los Web Components", los web components pueden servir en cualquier página web ya que son características nativas del navegador, sin importar si usas algún framework o no. El entender cómo funcionan los componentes sí te va a facilitar a aprender Vue o React, pero, en efecto, estos sustituyen los frameworks.
Wilkins Bernardo Brito Serrano
EstudianteAlguieb que me pueda explicar por qué solo sirve el atributo img con la imagen del directorio web del profesor y no me sirve con ningún otro directorio ni siquiera metiendo imágenes desde mis documentos locales???
Jesús Eduardo Duque Lovera
EstudianteHola ¿podrías mostrar tu código para intentar ayudarte? A mi me daba un error debido a la falta de un espacio en el js:
<img src=${this.img}/> // error <img src=${this.img} /> // sin error
Roberto Medina
EstudianteHola:
Hice un pequeño cambio en el nombre del atributo de imagen, para probar que el nombre del atributo en el index.html no necesariamente debe ser el mismo nombre que el utilizado dentro del my-element.js, lo importante es que este mapeado.
Pero seguro que las buenas prácticas indican que deben llamarse igual.
Saludos :)
Bryan Figueroa
EstudianteMe estan encantando los web components
Miguel Angel Reyes Moreno
EstudianteApuntes y código:
Atributos
Crearemos nuestros propios atributos en JS para colocarlos en la etiqueta HTML. Así mandamos información de manera sencilla.
<my-element title="Soy un título :D" parrafo="Soy el texto del párrafo" img="https://avatars3.githubusercontent.com/u/1905708?s=280&v=4"> </my-element>
class myElement extends HTMLElement { constructor(){ super(); //* Obtenemos acceso a todos los elementos y métodos de la clase que extendemos (heredamos) this.attachShadow({mode: 'open'}); //*Casi siempre todos los componentes tiene que venir en modo abierto. this.title = this.getAttribute('title'); //*Estos son los atributos que incluiremos en la etiqueta HTML this.parrafo = this.getAttribute('parrafo'); this.img = this.getAttribute('img'); } getTemplate(){ //*Esto será puro HTML const template = document.createElement('template'); template.innerHTML = ` <section> <h3>${this.title}</h3> <div> <p>${this.parrafo}</p> <img src="${this.img}}"/> </div> </section> ${this.getStyles()} <!---Aplicamos los estilos---> `; return template; }
jefred bedoya
EstudianteManejo de Atributos en Componentes Web
Los atributos permiten pasar datos desde el HTML hacia el componente de forma dinámica, convirtiendo a tu etiqueta personalizada en una interfaz configurable.
Concepto Clave
Al igual que etiquetas estándar (como <img> con src), tus componentes pueden recibir valores a través de atributos definidos en el HTML, los cuales son capturados mediante JavaScript para renderizarse dentro del Shadow DOM.
Implementación Técnica
this.getAttribute('nombre-del-atributo') dentro del constructor del componente para extraer el valor definido en la etiqueta.this.title), estos valores se inyectan en el template (usando template literals) para actualizar el DOM interno.
Jose Manuel Montaño Saenz
EstudianteLo siento por esta pregunta:
¿Por que no usa las palabras reservadas LET o CONST al crear las variables en el constructor?
Daniel Meza
EstudianteEn general, no es una buena práctica y en algunos IDE's si no que todos, te marcarán un error. El utilizar palabras reservadas en otra cosa que no sea para lo que ya están definidas.
John Jairo Rodriguez Rivas
EstudiantePorque no esta creando variables, esta creando atributos de la clase myElement, por eso le pone el **this.**nombreDeEjemplo, es un atributo y es la nomenclatura usada dentro de las clases para crearlos, probablemente ya lo tengas claro porque han pasado 4 meses xD, pero por si alguien mas no entendía le recomiendo repasar clases previas donde se trate este tema
Cristian Nicolai Hernandez Rios
Estudiante¿Como poner imágenes?
Luzan Muga
EstudianteHola Cristian,
Puedes hacerlo con una etiqueta <img> , te comparto esta página de W3School donde hay ejercicios simples para hacer esto:
Damian Spizzirri
Estudiante¿Para que pusimos type=''module" cuando importamos el archivos js? Se lo saco y sigue funcionando.
Joseph Manuel Salen Pantoja
EstudianteHola @Spizzirri!
El type="module" lo añadimos cuando queremos especificar que el archivo es un módulo JS, los módulos son archivos JS que pueden utilizar variables y funciones de otros archivos (import/export).
En este caso si va a funcionar ya que solo tenemos un script y no estamos importando/exportando nada.
Si gustas leer más al respecto te dejo este enlace a un artículo bastante corto y sencillo de UsefulAngle o esta lectura que es un poquito más larga y más profunda así que más interesante :D
Julian David Alzate Cuervo
Estudianteyo tuve que eliminar esa linea para que funcionara el ejercicio
Ivan Daniel Cuevas
EstudianteMe surge la duda y es saber si de esta froma esta construido frameworks como Bootstrap
Antonio López García
EstudianteUn saludo a todos. ¿Es posible pasar un array por parametros en un webcomponent?
Jorge Arias Argüelles
EstudiantePara obtener el valor de un atributo en tu componente web, utiliza el método getAttribute dentro de la clase de tu componente. Primero, define el atributo en tu HTML al instanciar el componente. Luego, en el constructor de tu componente, accede al atributo con this.getAttribute('nombreDelAtributo').
Por ejemplo, si tienes un atributo title, lo obtendrías así:
class MiComponente extends HTMLElement { constructor() { super(); this.title = this.getAttribute('title'); } }
Esto te permitirá usar el valor del atributo en tu componente.
Hector Rodriguez
EstudiantePara solucionar el error que no se renderiza la imagen que sea diferente al repositorio, esta es la solución:
Daniel Andres Rojas Paredes
EstudianteHola, como me recomiendan debuggear, como debbuguean ustedes?, yo suelo preguntarle a una ia en donde esta el error. pero puede llegar a ser algo frustrante y creo que deberia tener otras herramientas para hacerlo, puesto que en la mayoria de casos de este curso no me da ningun error en la consola del navegador, simplemente lo que estoy esperando que se renderice en la pantalla no aparece por ningun lado.
Lucho Cadiz
EstudianteDesde la devTools hay una pestaña llamada source que es donde se cargara tu archivo .js. Desde ese archivo puede marcar los breakpoints para ir debuggeando. Espero que te haya servido. Un saludo.