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
elementsFromPoint(x, y)
Parameters
Return value
An array of Element objects.
Examples
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.