ShadowRoot: elementsFromPoint() method

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The elementsFromPoint() method of the ShadowRoot interface returns an array of all the shadow root elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost element (highest in the display z-order), to the bottommost element.

It operates in a similar way to the ShadowRoot.elementFromPoint method. Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of the shadow DOM, from the shadow DOM element in the topmost layer to the document root node, such as the <html> or <svg> root element. In these browsers, it operates similar to the Document.elementsFromPoint method, but with the ability to cross the shadow boundary.

Syntax

js
elementsFromPoint(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 array of Element objects.

Examples

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("The custom element had no descendants at x: 20, y: 20.");
}

If <my-custom-element> is near the top left corner of the viewport, and contains a single <div>, the above may return either of the following, depending on the browser implementation:

div
div < my-custom-element < body < html

Specifications

Not part of any standard.

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
elementsFromPoint
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
See implementation notes.

See also