ShadowRoot: elementFromPoint() method

Syntax

elementFromPoint(x, y)

Parameters

x

The horizontal coordinate of a point, relative to the left edge of the current viewport.

y

The vertical coordinate of a point, relative to the top edge of the current viewport.

Return value

An Element; the topmost shadow root element located at the specified coordinates, if any.

Examples

In this example, assuming the existence of a <template> in the HTML, we define a <my-custom-element>. If the appended custom element abuts the top-left corner of the viewport, or any portion of it overlaps that corner, the element that is the topmost layer at that point in the custom element will have a thin, dashed red border.

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));
      // get the topmost element in the top left corner of the viewport
      const srElement = this.shadowRoot.elementFromPoint(0, 0);
      // apply a border to that element
      srElement.style.border = "1px dashed red";
    }
  },
);

Specifications

Not part of any standard.

Browser compatibility

See also

• ShadowRoot.elementsFromPoint()
• Document.elementFromPoint()