ShadowRoot: elementsFromPoint()-Methode

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die elementsFromPoint()-Methode des ShadowRoot-Interfaces gibt ein Array aller Shadow-Root-Elemente an den angegebenen Koordinaten (relativ zum Viewport) zurück. Die Elemente sind geordnet vom obersten Element (höchste in der Anzeige z-Ordnung) bis zum untersten Element.

Sie funktioniert ähnlich wie die ShadowRoot.elementFromPoint-Methode. Einige Browser geben nur die Shadow-Root-Elemente zurück, die an diesem Ort vorhanden sind. Andere Browser enthalten Elemente außerhalb des Shadow DOM, vom Shadow-DOM-Element in der obersten Schicht bis zum Dokument-Wurzelknoten, wie das <html>- oder das <svg>-Wurzelelement. In diesen Browsern funktioniert sie ähnlich wie die Document.elementsFromPoint-Methode, jedoch mit der Fähigkeit, die Schatten-Grenze zu überschreiten.

Syntax

js
elementsFromPoint(x, y)

Parameter

x

Die horizontale Koordinate eines Punktes, relativ zur linken Kante des aktuellen Viewports.

y

Die vertikale Koordinate eines Punktes, relativ zur oberen Kante des aktuellen Viewports.

Rückgabewert

Ein Array von Element-Objekten.

Beispiele

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.");
}

Wenn <my-custom-element> nahe der oberen linken Ecke des Viewports ist und ein einziges <div> enthält, kann das oben Genannte je nach Browser-Implementierung eines der folgenden zurückgeben:

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

Spezifikationen

Kein Teil eines Standards.

Browser-Kompatibilität

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.

Siehe auch