Para una aplicación de una sola página, registré algunos elementos personalizados en customElementRegistry que se representan a partir de literales de cadena a través de insertAdjacentHTML() . Anidar estos elementos no es un problema cuando se hace en html. Pero cuando trato de crear una instancia de un elemento personalizado principal mediante programación a partir de customElements.get('entry-page') o document.createElement('div', {is: 'entry-page'}) , los elementos personalizados anidados no se representan como si no estuviera definido en absoluto. Incluso customElements.whenDefined('nested-element').then(...) no ayuda.

 function registerCustomElement(name, tpl) { class cls extends HTMLDivElement { connectedCallback() { this.insertAdjacentHTML('afterbegin', tpl) } }; customElements.define(name, cls, { extends: 'div' }) } let tpl1 = '<p class="box">inner HTML</p>' let tpl2 = '<article class="outer">outer HTML<inner-html></inner-html></article>' let tpl3 = '<article class="outer">revised outer HTML<div is="inner-html"></div></article>' registerCustomElement('inner-html', tpl1) registerCustomElement('outer-html', tpl2) registerCustomElement('outer-html-revised', tpl3) document.querySelector('main') .insertAdjacentHTML('beforeend', '<div is="outer-html"></div>') document.querySelector('main') .insertAdjacentHTML('beforeend', '<div is="outer-html-revised"></div>')

 body { font-family: 'sans serif'; font-size: 0.8em } .box { padding: 1em; color: white; background-color: olive; } .outer { padding: 0.5em; margin-bottom: 0.5em; border: 2px solid darkorange }

 <h1>Embedded in html</h1> <h2>version with 'inner-html' element</h2> <outer-html></outer-html> <h2>version with 'div is inner-html' element</h2> <outer-html-revised></outer-html-revised> <h1>Embedded programmatically</h1> <main></main>

Cada elemento se define por separado como un Módulo ES6. Actualmente no estoy usando shadow DOM.

¿Por qué un elemento personalizado se representa completamente, incluidos todos los elementos anidados, cuando se incrusta en HTML, pero no cuando se implementa en el DOM mediante programación?

Editar El comportamiento del fragmento de código es diferente al de Firefox 94.0. Mientras que Firefox incluso evalúa elementos personalizados anidados con un nombre de etiqueta personalizado, este no es el caso con el motor de fragmentos de código. Entonces, posiblemente, los elementos personalizados anidados deberían tener el nombre de la etiqueta de su anchestor y tener un atributo "es" que indique el nombre del elemento personalizado.