Javascript 本机web组件之间的消息传递v1

我有两个本机web组件在嵌套设置中，如下所示

<top-nav theme="aqua">
  <nav-link selected>Dashboard</nav-link>
  <nav-link>Settings</nav-link>
  <nav-link>Profile</nav-link>
  <nav-link>Logout</nav-link>
</fancy-tabs>

仪表板
设置
轮廓
注销

每个组件的渲染效果都很好，但现在我需要添加它们之间的通信

最简单的用例是设置要选择的链接

默认情况下，仪表板是选中的链接

现在，当我单击“设置”链接时，“设置”链接变为选中状态，但我如何告诉仪表板组件删除选中的属性，因为在任何时刻只能有一个链接处于活动状态

我想从单击的元素触发一个事件，在顶部导航元素中捕获该事件，然后循环遍历所有子元素，如果该元素不是事件的起源，则删除所选属性

但这看起来很像Jquery时代的方法，这有点不对劲

还有其他想法吗？

一个解决方案是：

• 保存对当前选定图元的引用
• 要收听容器级别的click事件
• 捕获事件时，检查其

  目标

  ，以获取单击的
  子项
• 刷新新旧
  元素

selected=tn.querySelector（'nav-link[selected]”）
tn.addEventListener（'click'，ev=>{
如果（已选择！=电动目标）{
selected.removeAttribute（“selected”）
所选=电动汽车目标
selected.setAttribute（'selected'，''）
}
})

nav链接{光标：指针}
导航链接[选定]{背景色：黄色}

仪表板
设置
轮廓
注销