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.
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.
An array of Element objects.
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 < htmlSpecifications
Not part of any standard.
Browser compatibility See alsoRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4