Roberto Medina
PreguntaHola:
Tengo una duda.
Porque si en el minuto 13:38, aparecen 3 etiquetas de Hola mundo!!, en el minuto 13:42, no aparecen 3 veces:
hola Mundo!!
Hola mundo 2!
texto ejemplo para la case!
hola Mundo!!
Hola mundo 2!
texto ejemplo para la case!
hola Mundo!!
Hola mundo 2!
texto ejemplo para la case!
Saludos 😃
Daniel Castro Alejos
appendChild, hace que al nodo que indicamos pase al último.
Hernán Andrés Hernández Alemán
no se exactamente por que ocurre esto pero creo por que esta definido como una constante fuera de la clase cambie mi codigo de la siguente forma HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>custom elements</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> </head> <body> <my-element></my-element> <my-element></my-element> <my-element></my-element> <script type="module" src="./my-element.js"></script> </body> </html>
JS
class myElement extends HTMLElement { constructor() { super(); this.p = document.createElement("p"); this.template = document.createElement("div"); } connectedCallback() { this.p.textContent = "hola mundo"; this.template.innerHTML = ` <p>hola mundo 2!!</p> `; this.appendChild(this.p); this.appendChild(this.template); } } customElements.define("my-element", myElement);
esta fue la salida
Diego Alvaro Parra Abad
Conforme con tu duda, debería figurar el resultado que estás compartiendo, tengo entendido que debería replicarse.
Kevin Jiménez Osorno
De acuerdo a la documentación de appendChild. El hijo(template) hace referencia a un nodo que ya existe en el DOM (my-element), asi que lo quita el padre actual y lo pasa al ultimo.
<my-element></my-element> /* 1) Aqui se cargaria el template*/ <my-element></my-element> /* 2) El appendChild ve que existe un nuevo nodo padre con el mismo nombre asi que pasa el template a este nuevo nodo */
Pueden consultar la documentación de appendChild en: https://developer.mozilla.org/es/docs/Web/API/Node/appendChild
Jimmy Buriticá Londoño
El profesor borró dos etiquetas <my-element>, al dejar una sola, como se ve en el siguiente código fuente, entonces solo va a mostrar un Hola Mundo !!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Custom Elements</title> </head> <body> <my-element></my-element> <script type="module" src="./my-element.js"></script> </body> </html>
