ShadowRoot: elementsFromPoint() method

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

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

desktop mobile
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
Chrome – Full support
Chrome 53 (Release date: 2016-08-31)
footnote
footnote Before Chrome 66, this method returned null when the element was a child of a host node. See bug 40537452.
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 63 (Release date: 2018-10-23)
footnote Full support
Opera – Full support
Opera 40 (Release date: 2016-09-20)
footnote Full support
Safari – Full support
Safari 11.1 (Release date: 2018-04-12)
footnote Full support
Chrome Android – Full support
Chrome Android 53 (Release date: 2016-09-07)
footnote
footnote Before Chrome Android 66, this method returned null when the element was a child of a host node. See bug 40537452.
Firefox for Android – Full support
Firefox for Android 63 (Release date: 2018-10-23)
footnote Full support
Opera Android – Full support
Opera Android 41 (Release date: 2016-10-25)
footnote Full support
Safari on iOS – Full support
Safari on iOS 11.3 (Release date: 2018-03-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 6 (Release date: 2017-08-23)
footnote
footnote Before Samsung Internet 9.0, this method returned null when the element was a child of a host node. See bug 40537452.
WebView Android – Full support
WebView Android 53 (Release date: 2016-09-07)
footnote
footnote Before WebView Android 66, this method returned null when the element was a child of a host node. See bug 40537452.
WebView on iOS – Full support
WebView on iOS 11.3 (Release date: 2018-03-29)
footnote Full support

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