Javascript on click focus latest element with multiple customelements答案

【问题标题】：Javascript on click focus latest element with multiple customelementsJavascript on click focus latest element with multiple customelements
【发布时间】：2020-04-19 08:53:05
【问题描述】：

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

如果我创建了多个AppWindow，我希望我单击最后一个的那个在创建时能够“聚焦”，而且如果我点击一个已经创建的，它应该集中在其他上面，它应该有一个更高的 z-index。

有没有办法做到这一点？我不明白每个已经创建的AppWindow 是如何看到自最初创建以来已经创建了多少新元素。

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

【问题讨论】：

你试过编码了吗？提供带有问题的代码将最有助于为您提供更好的答案。
我不知道在 JSfiddle 中是否可以使用类并且我不允许分发我的代码。想象一下 shadowdom 中的 5 个自定义元素，它们是由事件监听器创建的，第一个应该知道是否有新元素添加到它们中。很抱歉我不能提供更多资源
您可以尝试使用数组来跟踪更改，并根据数组索引确定 z-index。此外，如果您无法共享您的代码，那么您应该咨询您组织中的高级工程师或更高级的工程师。

标签： javascript web-component shadow-dom custom-element

【解决方案1】：

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

最近的元素UP dom

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

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

如果您的 AppWindows 有 shadowDOM，上述方法将不起作用，
因为它不是“突破”shadowDOM

要穿透 shadowRoot，请使用 .closestElement() 来自： Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

计算孩子数

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

将其转换为数组

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

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

使用实时的 HTMLcollection

以上为您提供静态集合

desktop.getElementsByTagName('app-window')

为您提供实时 HTMLcollection，可能很有帮助：When is NodeList live and when is it static?

在桌面构造函数中你这样做：

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

以及桌面中的 Getter 方法：

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

所以在 AppWindow 构造函数中你可以这样做：

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

免责声明：完全不在我的脑海中，可能会出现一些语法错误！

【讨论】：