diff --git a/README.md b/README.md index 3c7754b..426d338 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ If none of the tabs have `aria-selected=true`, then the first tab will be select ### Parts +- `::part(tablist-wrapper)` is the wrapper which contains `before-tabs`, `tablist` and `after-tabs`. - `::part(tablist)` is the container which wraps all tabs. This element appears in ATs as it is `role=tablist`. - `::part(panel)` is the container housing the currently active tabpanel. - `::part(before-tabs)` is the container housing any elements that appear before the first `role=tab`. This also can be directly slotted with `slot=before-tabs`. This container lives outside the element with role=tablist to adhere to ARIA guidelines. diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts index 60ebce1..438f0ee 100644 --- a/src/tab-container-element.ts +++ b/src/tab-container-element.ts @@ -130,6 +130,7 @@ export class TabContainerElement extends HTMLElement { const shadowRoot = this.shadowRoot || this.attachShadow({mode: 'open', slotAssignment: 'manual'}) const tabListContainer = document.createElement('div') tabListContainer.style.display = 'flex' + tabListContainer.setAttribute('part', 'tablist-wrapper') const tabListSlot = document.createElement('slot') tabListSlot.setAttribute('part', 'tablist') const panelSlot = document.createElement('slot')