ShadowRoot: метод elementFromPoint()

Метод elementFromPoint(), доступный для объекта ShadowRoot, возвращает элемент на верхнем слое тенистого корня по заданным координатам относительно области просмотра (корень тени, наиболее высокий в порядке отображения Z, способный получать события указателя). Элементы тенистого корня, у которых свойство pointer-events установлено в none игнорируются.

Если заданная точка находится за пределами области тенистого корня, результат undefined.

x

Горизонтальная координата точки, относительно левого края текущей области просмотра.

y

Вертикальная координата точки, относительно верхнего края текущей области просмотра.

Объект Element; элемент верхнего тенистого корня, расположенный по указанным координатам, если таковой имеется.

В этом примере, предполагая наличие <template> в HTML, мы определяем <my-custom-element>. Если добавленный пользовательский элемент примыкает к верхнему левому углу области просмотра или какая-либо его часть перекрывает этот угол, элементу, который является верхним слоем в этом месте в пользовательском элементе, будет задана тонкая пунктирная красная граница.

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

Не является частью какого-либо стандарта.

• ShadowRoot.elementsFromPoint()
• Document.elementFromPoint()