以编程方式实例化父元素时未呈现嵌套的自定义元素

Question

对于单页应用程序，我已经向customElementRegistry注册了一些自定义元素，这些元素通过insertAdjacentHTML()从字符串文本中呈现。在html中嵌套这些元素是没有问题的。但是，当我尝试从customElements.get('entry-page')或document.createElement('div', {is: 'entry-page'})开始以编程方式实例化父自定义元素时，嵌套的自定义元素不会呈现为完全没有定义。即使是customElements.whenDefined('nested-element').then(...)也无济于事。

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>

每个元素被单独定义为一个ES6模块。我目前没有使用shadow DOM。

为什么自定义元素在嵌入HTML时会完全呈现，包括所有嵌套元素，而在DOM中以编程方式实现时却不会？

编辑正如Danny Engelman所说，唯一的跨浏览器选项是扩展HTMLElement。

Answer 1

虽然在HTML中，自定义元素甚至在字符串文本中也可能被这些名称引用，但当自定义元素以编程方式生成时，它们是基于这些名称的，这似乎不是真的。在这种情况下，规范需要类似<div is="custom-element-name">的东西，但它不会是跨浏览器的，因为苹果只支持HTMLElement。