New pages: ShadowRoot.elementFromPoint()

files/en-us/web/api/shadowroot/elementfrompoint/index.md

@@ -0,0 +1,68 @@
+---
+title: "ShadowRoot: elementFromPoint() method"
+short-title: elementFromPoint()
+slug: Web/API/ShadowRoot/elementFromPoint
+page-type: web-api-instance-method
+browser-compat: api.ShadowRoot.elementFromPoint
+---
+
+{{APIRef("DOM")}}{{Non-standard_Header}}
+
+The **`elementFromPoint()`** method, available on the {{domxref("ShadowRoot")}} object, returns the element at the topmost shadow root layer at the specified coordinates relative to the viewport (the shadow root highest in the display z-order, that is able to receive pointer events). Shadow root elements that have {{cssxref("pointer-events")}} set to `none` are ignored.
+
+If the specified point is outside the bounds of the shadow root, the result is `undefined`.
+
+## Syntax
+
+```js-nolint
+elementFromPoint(x, y)
+```
+
+### Parameters
+
+- `x`
+  - : The horizontal coordinate of a point, relative to the left edge of the current {{Glossary("viewport")}}.
+- `y`
+  - : The vertical coordinate of a point, relative to the top edge of the current viewport.
+
+### Return value
+
+An {{domxref("Element")}}; the topmost shadow root element located at the specified coordinates, if any.
+
+## Examples
+
+In this example, assuming the existence of a {{htmlelement("template")}} in the HTML, we define a `<my-custom-element>`. If the appended custom element abuts the top-left corner of the viewport, or any portion of it overlaps that corner, the element that is the topmost layer at that point in the custom element will have a thin, dashed red border.
+
+```js
+customElements.define(
+  "my-custom-element",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const templateContent = document.getElementById(
+        "my-custom-element-template",
+      ).content;
+      const sRoot = this.attachShadow({ mode: "open" });
+      sRoot.appendChild(templateContent.cloneNode(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";
+    }
+  },
+);
+```
+
+## Specifications
+
+Not part of any standard.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ShadowRoot.elementsFromPoint()")}}
+- {{domxref("Document.elementFromPoint()")}}

files/en-us/web/api/shadowroot/elementsfrompoint/index.md

@@ -0,0 +1,64 @@
+---
+title: "ShadowRoot: elementsFromPoint() method"
+short-title: elementsFromPoint()
+slug: Web/API/ShadowRoot/elementsFromPoint
+page-type: web-api-instance-method
+browser-compat: api.ShadowRoot.elementsFromPoint
+---
+
+{{APIRef("DOM")}}{{Non-standard_Header}}
+
+The **`elementsFromPoint()`** method of the {{domxref("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 {{domxref("ShadowRoot.elementFromPoint")}} method. Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of the [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM), from the shadow DOM element in the topmost layer to the document root node, such as the {{htmlelement("html")}} or {{SVGElement("svg")}} root element. In these browsers, it operates similar to the {{domxref("Document.elementsFromPoint")}} method, but with the ability to cross the [shadow boundary](/en-US/docs/Glossary/Shadow_tree).
+
+## Syntax
+
+```js-nolint
+elementsFromPoint(x, y)
+```
+
+### Parameters
+
+- `x`
+  - : The horizontal coordinate of a point, relative to the left edge of the current {{Glossary("viewport")}}.
+- `y`
+  - : The vertical coordinate of a point, relative to the top edge of the current viewport.
+
+### Return value
+
+An array of {{domxref('Element')}} objects.
+
+## Examples
+
+```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.");
+}
+```
+
+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:
+
+```plain
+div
+div < my-custom-element < body < html
+```
+
+## Specifications
+
+Not part of any standard.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMxRef("ShadowRoot.elementFromPoint()")}}
+- {{DOMxRef("Document.elementsFromPoint()")}}