I would like to querySelectorAll('a') inside of my unnamed slot and wrap those <a> tags inside a <li> element and manage the focus myself.

Here is what I tried so far:

// Component 'nav-bar.tsx'

componentDidLoad() {
  this.anchorElements = Array.from(this.hostEl.querSelectorAll('a'));
}

render() {
  return <nav>
    <ul>
     {this.anchorElements.map(this.renderListItemWrapper)}
     <div hidden>
       <slot />
     </div>
    </ul>
  </nav>
}

This is rendering correctly but causing the focus to be ignored when setting it programatically on some anchor link.

I want to be able to use my component in the following manner:

// index.html

<my-nav-bar>
  <a href="#">Test 1</a>
  <a routerLink="/path/to/foo">Angular Router</a>
  <a vue-route="/path/to/boo">Vue Router</a>
  ...
</my-nav-bar>