Javascript 单击焦点具有多个自定义元素的最新元素

Question

我有一个自定义元素 WebDesktop 可以创建另一个自定义元素 AppWindow。

如果我创建多个 AppWindow 我希望我最后点击的那个在创建时是 "focused" 但是如果我点击一个已经创建的它应该集中在其他人，它应该有更高的 z-index。

有什么办法吗？我不明白每个已创建的 AppWindow 如何可以看到自最初创建以来创建了多少个新元素。

我的解决方案是将 zIndex 设置为当前创建的数量 AppWindow 每个实例化的自定义元素能否以某种方式找出已创建了多少新元素或类似的东西？并跟踪它们是否已被删除？

Answer 1

这里有一些技巧可以提供帮助

最接近的元素UP dom

let desktop = this.closest('web-desktop')

每个元素上的这个标准方法让您获得 AppWindow 所在的桌面

如果你的 AppWindows 有阴影DOM以上方法将不起作用，
因为它不是 "break out" 的影子DOM

要穿透 shadowRoot(s) 使用 .closestElement() 来自：

计数children

一旦您知道 desktop 您的 AppWindows 在 desktop.children
您可以使用 [...desktop.children]

将其转换为数组

如果您在 .children 中有其他 DOM 元素，您的 AppWindows 是：
[...desktop.querySelectorAll('app-window')]

然后 [...desktop.querySelectorAll('app-window')]`.length 是您的 AppWindow 计数

喜欢实时 HTML 集合

以上内容为您提供 static collections

desktop.getElementsByTagName('app-window')

给你一个实时 HTML 集合，可以有用：

在 Desktop 构造函数中，您执行以下操作：

this.windows = this.shadowRoot.getElementsByTagName('app-window')

和桌面中的 Getter 方法：

get windowcount(){
  return this.windows.length;
}

因此，在 AppWindow 构造函数中，您可以执行以下操作：

let AppWindowIndex = this.closestElement('web-desktop').windowcount + 1;

disclaimer: all off the top of my head, might have made some syntax errors!

Javascript on click focus latest element with multiple customelements