ShadowRoot: elementsFromPoint() メソッド
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
elementsFromPoint() は ShadowRoot インターフェイスのメソッドで、指定された（ビューポートを基準とした）座標にあるすべてのシャドウルート要素の配列を返します。要素は、最上部の要素（表示の Z 順序が最も高いもの）から最下部の要素へと順に並べられます。
動作は、ShadowRoot.elementFromPoint メソッドと似ています。一部のブラウザーでは、その位置にあるシャドウルート要素のみが返されます。一方、他のブラウザーでは、シャドウ DOM の外側にある要素、つまり最上位層のシャドウ DOM 要素から文書のルートノードに至るまでの要素（<html> や <svg> といったルート要素など）も含まれます。これらのブラウザーでは、その動作は Document.elementsFromPoint メソッドと似ていますが、シャドウ境界を越えることができます。
構文
js
elementsFromPoint(x, y)
引数
返値
Element オブジェクトの配列です。
例
js
const customElem = document.querySelector("my-custom-element");
const shadow = customElem.shadowRoot;
const elements = shadow.elementsFromPoint(20, 20);
const msg = elements.map((el) => el.localName).join(" < ");
if (msg) {
console.log(msg);
} else {
console.log(
"x: 20、y: 20 の位置に、この独自の要素の子要素は存在しませんでした。",
);
}
<my-custom-element> がビューポートの左上隅付近にあり、かつ単一の <div> が含まれている場合、上記はブラウザーの実装に応じて、以下のどちらかを返すことがあります。
div div < my-custom-element < body < html
仕様書
どの標準規格にも属しません。