Manejo de Atributos en Componentes Web con JavaScript
Contenido del curso
Rony Porraz Vargas
Jimmy Buriticá Londoño
Nazareno Aznar Altamiranda
Christian Alvarenga
Uriel Mojica Mejía
Andres Felipe Pinchao Ramirez
Luis Daniel Hernández Guevara
Kenneth Angulo L
Jose Ramon Moreno Sanchez
Héctor Eduardo López Carballo
Wilkins Bernardo Brito Serrano
Jesús Eduardo Duque Lovera
Roberto Medina
Bryan Figueroa
Miguel Angel Reyes Moreno
Kenneth Angulo L
Jefred Bedoya
Jose Manuel Montaño Saenz
Daniel Meza
John Jairo Rodriguez Rivas
Cristian Nicolai Hernandez Rios
Luzan Muga
Damian Spizzirri
Joseph Manuel Salen Pantoja
Julian David Alzate Cuervo
Ivan Daniel Cuevas
Antonio López García
Jorge Arias Argüelles
Entre Slot y Atributos, prefiero usar los Atributos. Es muy similar a una etiqueta estándar HTML5.
Ademá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
Estoy fascinado con este curso.
Creo que es mucho mejor usar atributos en lugar de slots, es mas limpia y mejor estructurada
MY 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);
Los Web Components son lo mejor!!! lml
¿Por qué es mejor usar atributos aquí?
Utilizar atributos es ideal cuando necesitas pasar datos de configuración simples o valores de texto plano (como títulos, URLs, estados booleanos o identificadores), a diferencia de los slots, que están diseñados específicamente para inyectar bloques enteros de HTML. Los atributos mantienen tu código HTML mucho más limpio, legible y semántico desde la perspectiva de cualquier otro desarrollador que consuma tu componente. Imagina que estás construyendo un botón personalizado: es mucho más natural y directo escribir <mi-boton color="rojo" texto="Enviar"> que tener que anidar múltiples etiquetas dentro de él para lograr el mismo resultado. Además, los atributos te permiten tener un control estricto y programático sobre dónde y cómo se renderiza exactamente esa información dentro de la estructura interna de tu componente, evitando comportamientos inesperados en la interfaz.
Los componentes me ayudaran a trabajar con frameworks como Vue o React, o es para no usarlos?
Hola!
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.
Alguieb 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???
Hola ¿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
Hola:
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 :)
Me estan encantando los web components
Apuntes 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; }
Esto se esta pareciendo mucho al manejo de componentes en las plantillas Blade de Laravel.
Momento WOW ! ahora ya se cual es la mecanica detras de esos conceptos !!
Manejo 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.Lo siento por esta pregunta:
¿Por que no usa las palabras reservadas LET o CONST al crear las variables en el constructor?
En 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.
Porque 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
¿Como poner imágenes?
Hola Cristian,
Puedes hacerlo con una etiqueta <img> , te comparto esta página de W3School donde hay ejercicios simples para hacer esto:
¿Para que pusimos type=''module" cuando importamos el archivos js? Se lo saco y sigue funcionando.
Hola @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
yo tuve que eliminar esa linea para que funcionara el ejercicio
Me surge la duda y es saber si de esta froma esta construido frameworks como Bootstrap
Un saludo a todos. ¿Es posible pasar un array por parametros en un webcomponent?
Para 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.