3

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

有没有合适的方法来改变我的构造函数，这样我就不会把它扔到NotSupportedErrorSafari 中？

有没有更好的方法来设置这些元素及其内容？

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

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

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>
4

1 回答 1

2

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

于 2017-09-07T19:13:05.097 回答