Considere el siguiente escenario donde tengo una lista de elementos personalizados que se crea dinámicamente. CustomElement tiene una propiedad personalizada displayName que debería hacer algo cuando se establece:

 class CustomElement extends HTMLElement { set displayName(v) { this.querySelector(".name").textContent = v; } } customElements.define("custom-element", CustomElement) const template = document.querySelector("template"); const list = document.querySelector(".list"); document.querySelector("button").addEventListener("click", () => { const customElTemplate = template.content.firstElementChild; console.log("Template constructor: ", customElTemplate.constructor.name); const el = template.content.firstElementChild.cloneNode(true); console.log("Cloned el constructor:", el.constructor.name); el.displayName = "Should has content"; const frag = new DocumentFragment(); frag.appendChild(el); console.log("Cloned el in DocumentFragment constructor:", el.constructor.name); list.appendChild(frag); console.log("Cloned el in Document constructor:", el.constructor.name); });

 custom-element { display: block; margin-bottom: .5rem; border: 1px solid black; }

 <template> <custom-element><span class="name"></span></custom-element> </template> <button>Add Item</button> <div class="list"></div>

Al hacer clic en el botón, la salida de la consola es:

 Template constructor: HTMLElement Cloned el constructor: HTMLElement Cloned el in DocumentFragment constructor: HTMLElement Cloned el in Document constructor: CustomElement

Como puede ver, el elemento clonado no se convierte en CustomElement hasta que se adjunta al documento raíz y displayName es simplemente una propiedad simple que no hace nada.

el.displayName = "Should has content"; no funcionará incluso después de adjuntarlo a un DocumentFragment . Solo funciona después de adjuntarlo al documento (es decir, después de list.appendChild(frag); en el ejemplo anterior)

¿Por qué está pasando esto? ¿Puedo configurar el elemento de todos modos antes de adjuntarlo al documento principal?

ACTUALIZACIÓN: Veo que hay customElements.upgrade , pero incluso al agregarlo, nada cambia, a diferencia del ejemplo proporcionado en el artículo:

 customElements.upgrade(el);