Intento que funcione un elemento personalizado html:
Al ver el siguiente ejemplo en el navegador, debo concluir que el atributo this.dataset.text en el constructor() es:
<html> <head> <title>myimage</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> before custom element definition: <my-element data-text="Replaced and works as expected">Not Replaced</my-element> </div> <script> class MyElement extends HTMLElement { constructor() { super(); this.text_attribute= this.dataset.text; } connectedCallback() { if (this.text_attribute) { this.innerText = this.text_attribute; } } } customElements.define('my-element', MyElement); </script> <div> after custom element definition: <my-element data-text="Replaced">Not Replaced</my-element> </div> </body> </html>Este parece ser un comportamiento común en Chrome y Firefox. Puedo proporcionar algunos datos más:
this.dataset.text siempre está presente en connectedCallback()text a través de this.getAttribute('data-text') se comporta de la misma manera que arriba¿Alguien puede explicar el propósito de este comportamiento aparentemente defectuoso?
Este no es un comportamiento defectuoso.
Su primer <my-element> es procesado por el analizador DOM antes de que lo defina.
Por lo tanto, todos los atributos son conocidos (en el DOM) cuando se ejecuta el constructor .
En general, no accede a DOM en el constructor ; como también se ejecuta cuando lo haces:
let foo = document.createElement("my-element"); // absolutly no DOM createdAquí hay un ejemplo recortado:
<style> my-element { display:block } </style> <my-element id="FOO"> ONE </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); document.body.append(` ► constructor id:${this.id} ◄ `); } connectedCallback() { document.body.append(` ► connected id:${this.id} ◄ `); } }); </script> <my-element id="BAR"> TWO </my-element> <my-element id="BAZ"> THREE </my-element>NOTA
Cómo se escribe FOO innerHTML (porque se analizó) en el DOM antes de que se ejecute su constructor
Cómo se ejecutan los constructores BAR y BAZ antes de que su innerHTML se escriba en el DOM
y el valor de id aún no existe
He visto muchos cursos en los que lo "salvan" de este comportamiento estándar al ejecutar <script> async , por lo tanto, después de que se analiza todo el DOM. No entienden la tecnología...