ShadowRoot: elementFromPoint() メソッド

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

elementFromPoint() メソッドは ShadowRoot オブジェクト上で利用可能で、ビューポートを基準とした指定された座標にある、最上位のシャドウルートレイヤーの要素（表示の Z 順序で最も上位にあり、ポインタイベントを受け取ることができるシャドウルート）を返します。pointer-events が none に設定されているシャドウルート要素は無視されます。

指定された点がシャドウルートの境界外にある場合、結果は undefined となります。

構文

elementFromPoint(x, y)

引数

x: 点の水平座標で、現在のビューポートの左端からの相対値です。
y: 点の垂直座標で、現在のビューポートの上端からの相対値です。

返値

Element。指定された座標にある最上位のシャドウルート要素（存在する場合）。

例

この例では、HTML 内に <template> が存在すると仮定して、<my-custom-element> を定義します。追加されたカスタム要素がビューポートの左上角に隣接している場合、またはその一部が左上角と重なっている場合、この点でカスタム要素の最上層にある要素には、細い赤い破線の境界線が表示されます。

customElements.define(
  "my-custom-element",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById("my-custom-element-template");
      const sRoot = this.attachShadow({ mode: "open" });
      sRoot.appendChild(document.importNode(template.content, true));
      // ビューポートの左上角にある最上部の要素を取得する
      const srElement = this.shadowRoot.elementFromPoint(0, 0);
      // この要素に境界線を適用する
      srElement.style.border = "1px dashed red";
    }
  },
);