父自定义元素的构造函数中的 shadowRoot.innerHTML 中的 Safari NotSupportedError 自定义元素

Question

我正在创建一个自定义元素并将其 shadowRoot 设置为包含其他自定义元素，这会引发 NotSupportedError (DOM Exception 9): A newly constructed custom element must not have child nodes。 (请注意，当标记中没有子自定义元素时，它不会抛出错误。)

是否有适当的方法来更改我的构造函数，以便我不会在 Safari 中抛出此 NotSupportedError？

是否有更好的方法来设置此元素及其内容？

为什么仅当我在其标记中有另一个自定义元素时才会发生这种情况？

谢谢。以下是相关工作的节选。

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

我的 child select-provider 正在构造函数中执行 this.appendChild，这会引发此错误。否则它会按预期工作。为了解决这个问题，我只是将它移到了 connectedCallback 中。