first attempt

Author: mperrotti

examples/index.html

@@ -46,6 +46,27 @@ <h2>Horizontal (custom tablist)</h2>
       </div>
     </tab-container>
 
+    <h2>Horizontal (custom tablist and tablist-wrapper)</h2>
+
+    <tab-container>
+      <div slot="tablist-tab-wrapper">
+        <div role="tablist" aria-label="Horizontal Tabs Example">
+          <button type="button" id="tab-one" role="tab">Tab one</button>
+          <button type="button" id="tab-two" role="tab">Tab two</button>
+          <button type="button" id="tab-three" role="tab">Tab three</button>
+        </div>
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-one">
+        Panel 1
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-two" hidden>
+        Panel 2
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-three" hidden>
+        Panel 3
+      </div>
+    </tab-container>
+
     <h2>Vertical (shadow tablist)</h2>
 
     <tab-container>
@@ -140,7 +161,7 @@ <h2>Panel with extra buttons</h2>
 
   </main>
 
-  <!--<script src="../dist/index.js" type="module"></script>-->
-  <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
+  <script src="../dist/index.js" type="module"></script>
+  <!-- <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script> -->
 </body>
 </html>

src/tab-container-element.ts

@@ -104,7 +104,7 @@ export class TabContainerElement extends HTMLElement {
   }
 
   get #tabListTabWrapper() {
-    return this.shadowRoot!.querySelector<HTMLSlotElement>('div[part="tablist-tab-wrapper"]')!
+    return this.shadowRoot!.querySelector<HTMLSlotElement>('slot[part="tablist-tab-wrapper"]')!
   }
 
   get #beforeTabsSlot() {
@@ -165,8 +165,9 @@ export class TabContainerElement extends HTMLElement {
     const tabListContainer = document.createElement('div')
     tabListContainer.style.display = 'flex'
     tabListContainer.setAttribute('part', 'tablist-wrapper')
-    const tabListTabWrapper = document.createElement('div')
+    const tabListTabWrapper = document.createElement('slot')
     tabListTabWrapper.setAttribute('part', 'tablist-tab-wrapper')
+    tabListTabWrapper.setAttribute('name', 'tablist-tab-wrapper')
     const tabListSlot = document.createElement('slot')
     tabListSlot.setAttribute('part', 'tablist')
     tabListSlot.setAttribute('name', 'tablist')
@@ -275,13 +276,22 @@ export class TabContainerElement extends HTMLElement {
     if (!this.#setupComplete) {
       const tabListSlot = this.#tabListSlot
       const customTabList = this.querySelector('[role=tablist]')
-      if (customTabList && customTabList.closest(this.tagName) === this) {
+      const customTabListWrapper = this.querySelector('[slot=tablist-tab-wrapper]')
+      if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
+        if (manualSlotsSupported) {
+          tabListSlot.assign(customTabListWrapper)
+        } else {
+          customTabListWrapper.setAttribute('slot', 'tablist')
+        }
+      }
+      else if (customTabList && customTabList.closest(this.tagName) === this) {
         if (manualSlotsSupported) {
           tabListSlot.assign(customTabList)
         } else {
           customTabList.setAttribute('slot', 'tablist')
         }
-      } else {
+      }
+      else {
         this.#tabListTabWrapper.role = 'tablist'
         if (manualSlotsSupported) {
           tabListSlot.assign(...[...this.children].filter(e => e.matches('[role=tab]')))