New pages: ShadowRoot.elementFromPoint() #37115
Conversation
github-actions
bot
added
Content:WebAPI
|
Preview URLs Flaws (1)Note! 1 document with no flaws that don't need to be listed. 🎉 URL:
(comment last updated: 2025-01-12 03:01:47) |
|
|
||
| {{APIRef("DOM")}}{{Non-standard_Header}} | ||
|
|
||
| The **`elementFromPoint()`** method, available on the {{domxref("ShadowRoot")}} object, returns the topmost shadowroot element at the specified coordinates relative to the viewport that does not have {{cssxref("pointer-events")}} set to `none`. |
There was a problem hiding this comment.
What does "topmost" mean? Is it in the topmost layer, as in "top layer"? Or first in the DOM?
|
|
||
| {{APIRef("DOM")}}{{Non-standard_Header}} | ||
|
|
||
| The **`elementFromPoint()`** method, available on the {{domxref("ShadowRoot")}} object, returns the topmost shadowroot element at the specified coordinates relative to the viewport that does not have {{cssxref("pointer-events")}} set to `none`. |
There was a problem hiding this comment.
This has "shadowroot", the next para has "shadowRoot", and the other page has "shadow root". I think "shadow root" is probably best. This also ought to link to somewhere shadow root is defined. Maybe https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree ?
There was a problem hiding this comment.
I think the "does not have {{cssxref("pointer-events")}} set to none." is confusing, it's not obvious what it refers to. I assume it is the shadow root element? So it would be clearer to make this a separate sentence, like "Shadow root elements which have {{cssxref("pointer-events")}} set to none are ignored."
| ```js | ||
| customElements.define( | ||
| "my-custom-element", | ||
| class extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
| let template = document.getElementById("my-custom-element-template"); | ||
| let templateContent = template.content; | ||
| const sRoot = this.attachShadow({ mode: "open" }); | ||
| sRoot.appendChild(templateContent.cloneNode(true)); | ||
| let srElement = this.shadowRoot.elementFromPoint(0, 0); | ||
| srElement.style.border = "1px dashed red"; | ||
| } | ||
| }, | ||
| ); | ||
| ``` |
There was a problem hiding this comment.
I'm not sure I really understand the use case this example is serving. As a specific code comment, all these let declarations could be const.
| 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 descendant to the bottommost element. | ||
|
|
||
| It operates in a similar way to the {{domxref("ShadowRoot.elementFromPoint", "elementFromPoint()")}} method. Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of the {{glossary("shadow DOM")}}, from the topmost shadow DOM element 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", "elementFromPoint()")}} method, but with the ability to cross the [shadow boundary](/en-US/docs/Glossary/Shadow_tree). |
There was a problem hiding this comment.
This paragraph is confusing because the link text elementFromPoint() is the same although the actual linked page is different.
| - `x` | ||
| - : The horizontal coordinate of a point. | ||
| - `y` | ||
| - : The vertical coordinate of a point. |
There was a problem hiding this comment.
The other page specified the origin for these, but this doesn't.
| let msg = ""; | ||
| let elements = shadow.elementsFromPoint(20, 20); | ||
| elements.forEach((el, i) => { | ||
| msg += el.localName; | ||
| if (i < elements.length - 1) { | ||
| msg += " < "; | ||
| } | ||
| }); |
There was a problem hiding this comment.
| let msg = ""; | |
| let elements = shadow.elementsFromPoint(20, 20); | |
| elements.forEach((el, i) => { | |
| msg += el.localName; | |
| if (i < elements.length - 1) { | |
| msg += " < "; | |
| } | |
| }); | |
| const elements = shadow.elementsFromPoint(20, 20); | |
| const msg = elements.map(el => el.localName).join(" < "); |
sometimes JavaScript is nice.
| 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 element in the top most layer, to the bottommost element. |
There was a problem hiding this comment.
Edited. Topmost and bottommost are words. Who would have thunk. Merriam Webster hmmmfff
| 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 element in the top most layer, to the bottommost element. | |
| 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 element in the topmost layer, to the bottommost element. |
| 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 element in the top most layer, 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 {{glossary("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). |
There was a problem hiding this comment.
{{glossary("shadow DOM")}} is a red link. Normally this points to the shadow tree.
| 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 element in the top most layer, 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 {{glossary("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). |
There was a problem hiding this comment.
Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of
Sounds like a compatibility issue. Should it be in the bcd? Appreciate there is no spec, so there is not "right" way, but there are still behavioural differences.
|
|
||
| {{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. Shadow root elements that have {{cssxref("pointer-events")}} set to `none` are ignored. |
There was a problem hiding this comment.
I only just worked out (what I think) this means by reading the following document (interface returns an array of all the shadow root elements at the specified coordinates (relative to the viewport).
So what is happening here is that you might have multiple elements located at a point, some visible, some invisible, some in the HTML dom and some in the shadow dom. There are layered via the z-order, and the element that is returned is the one in the topmost layer - i.e. the one that would receive the point event (unless the shadow root doesn't accept pointer events).
I mistook this "topmost" think to be about the nesting of elements within the shadow root, and to mean the shadow root itself. That might be my lack of knowledge, but you might want to word this to avoid the possible.
You could for example, do something like
| 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. Shadow root elements that have {{cssxref("pointer-events")}} set to `none` are ignored. | |
| 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. |
Part of openwebdocs/project#214