我正在创建一个自定义元素并将其 shadowRoot 设置为包含其他自定义元素,这会抛出NotSupportedError (DOM Exception 9): A newly constructed custom element must not have child nodes
. (请注意,当标记中没有子自定义元素时,它不会抛出错误。)
有没有合适的方法来改变我的构造函数,这样我就不会把它扔到NotSupportedError
Safari 中?
有没有更好的方法来设置这些元素及其内容?
为什么只有当我在其标记中有另一个自定义元素时才会发生这种情况?
谢谢。以下是相关工作的节选。
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>