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

我正在创建一个自定义元素，并将其shadowRoot设置为包含其他自定义元素，这会抛出

NotSupportedError（DOM异常9）：新构造的自定义元素不能有子节点
。（请注意，当标记中没有子自定义元素时，不会引发错误。）

有没有合适的方法来更改我的构造函数，这样我就不会在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>

类MyControl扩展了HtmleElement{
构造函数（）{
超级（）；
var shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=`
`;
}
}
自定义元素。定义（'my-control'，MyControl）；
类SelectProvider扩展了HtmleElement{
构造函数（）{
超级（）；
var shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=`
`;
}
/*忽略了src的处理，正在加载url*/
render（）{/*使用选项重写选择*/}
}
自定义元素。定义（'select-provider'，SelectProvider）；
此自定义元素在Safari中引发错误
My child
select provider
在引发此错误的构造函数中执行了一个
this.appendChild
。否则，它将按预期工作。若要解决此问题，我只需将其移动到
connectedCallback
插槽标记中，因为它们是插入点，所以插槽标记应为空。@Supersharp没有提供内容时，插槽中的内容是默认内容。换句话说，这是有效和期望的用途，也是插槽命名的原因。您是否看到
NotSupportedError
s随着插槽按照您的建议进行调整而消失？您是对的，但是当您删除它时，您是否仍会在Safari中看到错误？@Supersharp是的，错误会消失，但当插槽为空时，错误不会消失，只有当插槽不再具有自定义元素时才会消失。另一种说法是：我可以在插槽中放置任何标记，但是当它有另一个自定义元素时，会抛出此错误？在哪里可以定义
connectedCallback
？这就是我要找的链接。这对我使用web组件的工作也很有帮助：包括最佳实践。与原始问题相关的关键要点通常是避免对自定义元素进行任何更改（没有DOM更改），shadowRoot除外，它可以在构造函数中执行任何操作。我通常向自定义元素添加事件侦听器，并在构造函数中填充shadowRoot，在连接的回调中处理影响非阴影dom的任何更复杂的呈现/dom/事件。