Safari NotSupportedError Elément personnalisé dans shadowRoot.innerHTML dans le constructeur de parent Elément personnalisé

Question

Je crée un élément personnalisé et définit son shadowRoot pour inclure d'autres éléments personnalisés, ce qui génère NotSupportedError (DOM Exception 9): A newly constructed custom element must not have child nodes. (Notez qu'il ne lance pas l'erreur lorsqu'il n'y a pas d'élément personnalisé enfant dans le balisage.)

Existe-t-il un moyen approprié de changer mon constructeur afin que je ne lance pas NotSupportedError dans Safari?

Existe-t-il une meilleure façon de configurer ces éléments et leur contenu?

Pourquoi cela se produit-il uniquement lorsque j'ai un autre élément personnalisé dans son balisage?

Merci. Ce qui suit est un extrait du travail pertinent.

class MyControl extends HTMLElement{ 
constructor(){ 
    super(); 

    var shadowRoot = this.attachShadow({mode: 'open'}); 
    shadowRoot.innerHTML = `<slot name=form><select-provider src="/path/to/endpoint"></select-provider></slot> 
`; 
} 
} 
customElements.define('my-control', MyControl); 
class SelectProvider extends HTMLElement{ 
constructor(){ 
    super(); 

    var shadowRoot = this.attachShadow({mode: 'open'}); 
    shadowRoot.innerHTML = `<slot></slot> 
`; 
} 
/* omitted handling of src, loading url */ 
render(){/* rewrite select with options */} 
} 
customElements.define('select-provider', SelectProvider); 
</script> 
<my-control><span>this custom element throws and error in Safari</span></my-control> 

Answer 1

Mon enfant select-provider était de faire un this.appendChild dans le constructeur qui lance cette erreur. Sinon, cela fonctionne comme prévu. Pour résoudre j'ai simplement déplacé cela dans le connectedCallback.