Clase 12 de 22 • Curso de JavaScript: Web Components
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
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
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
Hector Rodriguez
Daniel Andres Rojas Paredes
Lucho Cadiz
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
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; }
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.
Para solucionar el error que no se renderiza la imagen que sea diferente al repositorio, esta es la solución:
Hola, 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.
Desde 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.