ShadowRoot: elementFromPoint()-Methode
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die elementFromPoint()-Methode, verfügbar auf dem ShadowRoot-Objekt, gibt das Element an der obersten Schicht des Shadow-Roots an den angegebenen Koordinaten relativ zum Viewport zurück (der oberste Shadow-Root in der Anzeigereihenfolge, der Zeigerereignisse empfangen kann). Shadow-Root-Elemente, bei denen pointer-events auf none gesetzt ist, werden ignoriert.
Wenn der angegebene Punkt außerhalb der Grenzen des Shadow-Roots liegt, ist das Ergebnis undefined.
Syntax
elementFromPoint(x, y)
Parameter
Rückgabewert
Ein Element; das oberste Shadow-Root-Element, das an den angegebenen Koordinaten vorhanden ist, falls vorhanden.
Beispiele
In diesem Beispiel definieren wir, vorausgesetzt es gibt ein <template> im HTML, ein <my-custom-element>. Wenn das angehängte benutzerdefinierte Element an der oberen linken Ecke des Viewports angrenzt oder ein Teil davon diese Ecke überlappt, erhält das Element, das an diesem Punkt die oberste Schicht im benutzerdefinierten Element darstellt, einen dünnen, gestrichelten roten Rand.
customElements.define(
"my-custom-element",
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById("my-custom-element-template");
const sRoot = this.attachShadow({ mode: "open" });
sRoot.appendChild(document.importNode(template.content, true));
// get the topmost element in the top left corner of the viewport
const srElement = this.shadowRoot.elementFromPoint(0, 0);
// apply a border to that element
srElement.style.border = "1px dashed red";
}
},
);
Spezifikationen
Nicht Teil eines Standards.