Siguiendo este tutorial de Google sobre componentes web , me gusta la forma en que el autor usa una clase anónima en la llamada de función customElements.define , ya que evita incluso más corchetes al crear una llamada de función invocada inmediatamente.
Estoy usando una variable de clase estática para almacenar el elemento de la plantilla, por lo que no se consulta cada vez que se crea una instancia de la etiqueta personalizada.
El problema está en connectedCallback . No sé cómo referirme al nombre de la clase, ya que es una función anónima. En python, uno podría type(self) , pero mi investigación muestra que typeof this no funciona en JS debido a la magia del prototipo.
window.customElements.define('my-uploader', class extends HTMLElement { static template = document.getElementById("TEMPLATE_UPLOADER"); constructor() { super(); // always call super() first } /** Custom Component Reactions **/ connectedCallback() { let shadowRoot = this.attachShadow({mode: "open"}); shadowRoot.appendChild(document.importNode(ANONYMOUS_NAME.template, true)); // <--- How to refer to the class name here? } ¿Cómo hacer referencia a la clase ANONYMOUS_NAME en connectedCallback ?
Puede nombrar su clase, es la forma más limpia, o puede usar this.constructor para obtener el valor de su variable estática:
window.customElements.define('my-uploader', class extends HTMLElement { static template = document.getElementById("TEMPLATE_UPLOADER"); constructor() { super(); // always call super() first } /** Custom Component Reactions **/ connectedCallback() { let shadowRoot = this.attachShadow({mode: "open"}); shadowRoot.appendChild(document.importNode(this.constructor.template, true)); }Cuando trabaja con shadowDOM, usted (en general) crea todo en el constructor
¡Los activadores de devolución de llamada connectedCallback para cada inserción de DOM O CAMBIO DE DOM! Piense en las interacciones de arrastrar y soltar, o en la clasificación de elementos DOM.
Se producirá un error si intenta adjuntar un shadowRoot nuevamente
Puedes encadenar todos los JS, ver más abajo
importNode es para múltiples documentos; verás cloneNode en los mejores blogs.
append tiene más poder, vea los documentos.
Simplemente no estaba disponible en IE, por lo que los viejos JS-Geezers no lo saben.
customElements.define('my-uploader', class extends HTMLElement { constructor() { let template = document.getElementById("TEMPLATE_UPLOADER").content; // don't believe the (MDN) documentation, you CAN execute JS BEFORE super() // you just can't access 'this' BEFORE super() super() // super sets AND returns the 'this' scope .attachShadow({mode: "open"}) // sets AND returns this.shadowRoot; .append(template.cloneNode(true)); } }); <template id="TEMPLATE_UPLOADER"> <style> :host{ color:red; } </style> <h1>I am <slot></slot></h1> </template> <h1>Hello Web Components!</h1> <my-uploader>Uploader!</my-uploader> ¡Nota! ¡El constructor también se ejecuta en document.createElement("my-uploader") cuando su Elemento NO EXISTE en DOM todavía!