Shadow DOM内からのGetElementById
属性targetの変更をリッスンするシャドーDOMのカスタム要素があります。targetは、私のコンポーネントがアタッチされるはずの要素のIDであることになっています。
querySelectorとgetElementByIdを使用して外部DOMの要素を取得しようとしましたが、常にnullが返されます。
console.log(document.getElementById(target));
console.log(document.querySelector('#' + target));
上記のどちらもnullを返します。
シャドウDOM内から親ドキュメントの要素への参照を取得する方法はありますか？
Shadow Rootを呼び出すだけです。
this.shadowRoot.getElementById('target')が機能するはずです。
次に例を示します。 get 構文は、オブジェクトプロパティを関数にバインドします。
get target() {
return this.shadowRoot.getElementById('target');
}