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.
TheelementsFromPoint() method of theShadowRoot 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 theShadowRoot.elementFromPoint method. Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of theshadow 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 theDocument.elementsFromPoint method, but with the ability to cross theshadow boundary.
Syntax
elementsFromPoint(x, y)Parameters
Return value
An array ofElement 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:
divdiv < my-custom-element < body < html
Specifications
Not part of any standard.