https://eloquentjavascript.net/15_event.html#i_Kk1WKx2anJ

Eloquent JavaScript 1503 Tabs.html

<tab-panel>
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</tab-panel>
<script>
  function asTabs(node) {
    
    const tabList = document.createElement('div');
    const tabs = Array.from(node.children).map((child) => {
      const button = document.createElement('button');
      button.textContent = child.getAttribute('data-tabname');
      const tab = { node: child, button };
      button.addEventListener('click', () => selectTab(tab));
      tabList.appendChild(button);
      return tab;
    });
    node.insertBefore(tabList, node.firstChild);
    
    const selectTab = (selectedTab) => {
      tabs.forEach((tab) => {
        const selected = selectedTab === tab;
        tab.node.style.display = selected ? '' : 'none';
        tab.button.style.backgroundColor = selected ? 'yellow' : '';
      });
    };
    
    selectTab(tabs[0]);
  }
  asTabs(document.querySelector("tab-panel"));
</script>