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

Question

我在嵌套设置中有两个本机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>

渲染对于每个组件单独工作正常，但现在我需要在它们之间添加通信。

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

默认情况下，仪表板被选中链接。

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

我想从clicked元素触发事件，在top-nav元素中捕获事件，然后循环遍历所有子元素并删除所选元素，如果元素不是事件的原点。

但这看起来非常Jquery时代的方法，有些事情是不对的。

还有其他想法吗？

Answer 1

一个解决方案是：

• 保存对当前所选元素的引用
• 收听<top-nav>容器级别的点击事件，
• 当你发现一个事件event，检查其target得到点击<nav-link>孩子，
• 刷新旧的和新的<nav-link>元素。

selected = tn.querySelector('nav-link[selected]')
tn.addEventListener('click', ev => {
  if (selected != ev.target) {
    selected.removeAttribute('selected')
    selected = ev.target
    selected.setAttribute('selected', '')
  }
})

nav-link { cursor: pointer }
nav-link[selected] { background-color: yellow }

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