1
カスタム要素を作成し、shadowRootにNotSupportedError (DOM Exception 9): A newly constructed custom element must not have child nodesをスローする他のカスタム要素を含めるように設定しています。Safari NotSupportedError親要素のコンストラクタ内のshadowRoot.innerHTMLのカスタム要素
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>
スロットタグは、挿入ポイントと同じように空白にする必要があります。 – Supersharp
@Supersharpコンテンツが提供されていない場合、スロット内のコンテンツがデフォルトコンテンツになります。換言すれば、これは有効かつ望ましい使用であり、スロットが命名された理由である。あなたは、あなたが提案している行に沿ったスロット調整で 'NotSupportedError'sが消えているのを見ていますか？ – jimmont
あなたはそうですが、削除するとSafariでエラーが表示されますか？ – Supersharp