Skip to content

Commit ce86c9b

Browse files
authored
Merge pull request #94 from github/tidy-and-refactor-code
Tidy up manual slot assignment code
2 parents 17a45e7 + 2d6c046 commit ce86c9b

File tree

1 file changed

+24
-40
lines changed

1 file changed

+24
-40
lines changed

src/tab-container-element.ts

+24-40
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
const HTMLElement = globalThis.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
2-
const manualSlotsSupported = 'assign' in (globalThis.HTMLSlotElement?.prototype || {})
2+
3+
// Function to see if manual slots are supported and if not, manual assign the slot attribute
4+
const assignSlotWithFallback =
5+
'assign' in (globalThis.HTMLSlotElement?.prototype || {})
6+
? (slot: HTMLSlotElement, ...elements: Element[]) => {
7+
slot.assign(...elements)
8+
}
9+
: (slot: HTMLSlotElement, ...elements: Element[]) => {
10+
const host = (slot.getRootNode() as ShadowRoot).host
11+
for (const element of host.querySelectorAll(`[slot="${slot.name}"]`)) {
12+
element.removeAttribute('slot')
13+
}
14+
for (const element of elements) {
15+
element.setAttribute('slot', slot.name)
16+
}
17+
}
318

419
export class TabContainerChangeEvent extends Event {
520
constructor(
@@ -289,32 +304,14 @@ export class TabContainerElement extends HTMLElement {
289304
const customTabListWrapper = this.querySelector('[slot=tablist-wrapper]')
290305
const customTabListTabWrapper = this.querySelector('[slot=tablist-tab-wrapper]')
291306
if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
292-
if (manualSlotsSupported) {
293-
tabListWrapper.assign(customTabListWrapper)
294-
} else {
295-
customTabListWrapper.setAttribute('slot', 'tablist-wrapper')
296-
}
307+
assignSlotWithFallback(tabListWrapper, customTabListWrapper)
297308
} else if (customTabListTabWrapper && customTabListTabWrapper.closest(this.tagName) === this) {
298-
if (manualSlotsSupported) {
299-
tabListTabWrapper.assign(customTabListTabWrapper)
300-
} else {
301-
customTabListTabWrapper.setAttribute('slot', 'tablist-tab-wrapper')
302-
}
309+
assignSlotWithFallback(tabListTabWrapper, customTabListTabWrapper)
303310
} else if (customTabList && customTabList.closest(this.tagName) === this) {
304-
if (manualSlotsSupported) {
305-
tabListSlot.assign(customTabList)
306-
} else {
307-
customTabList.setAttribute('slot', 'tablist')
308-
}
311+
assignSlotWithFallback(tabListSlot, customTabList)
309312
} else {
310313
this.#tabListTabWrapper.role = 'tablist'
311-
if (manualSlotsSupported) {
312-
tabListSlot.assign(...[...this.children].filter(e => e.matches('[role=tab]')))
313-
} else {
314-
for (const e of this.children) {
315-
if (e.matches('[role=tab]')) e.setAttribute('slot', 'tablist')
316-
}
317-
}
314+
assignSlotWithFallback(tabListSlot, ...[...this.children].filter(e => e.matches('[role=tab]')))
318315
}
319316
const tabList = this.#tabList
320317
this.#reflectAttributeToShadow('aria-description', tabList)
@@ -349,15 +346,9 @@ export class TabContainerElement extends HTMLElement {
349346
autoSlotted.push(child)
350347
}
351348
}
352-
if (manualSlotsSupported) {
353-
this.#beforeTabsSlot.assign(...beforeSlotted)
354-
this.#afterTabsSlot.assign(...afterTabSlotted)
355-
this.#afterPanelsSlot.assign(...afterSlotted)
356-
} else {
357-
for (const el of beforeSlotted) el.setAttribute('slot', 'before-tabs')
358-
for (const el of afterTabSlotted) el.setAttribute('slot', 'after-tabs')
359-
for (const el of afterSlotted) el.setAttribute('slot', 'after-panels')
360-
}
349+
assignSlotWithFallback(this.#beforeTabsSlot, ...beforeSlotted)
350+
assignSlotWithFallback(this.#afterTabsSlot, ...afterTabSlotted)
351+
assignSlotWithFallback(this.#afterPanelsSlot, ...afterSlotted)
361352
}
362353
const defaultTab = this.defaultTabIndex
363354
const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
@@ -400,18 +391,11 @@ export class TabContainerElement extends HTMLElement {
400391
if (!panel.hasAttribute('tabindex') && !panel.hasAttribute('data-tab-container-no-tabstop')) {
401392
panel.setAttribute('tabindex', '0')
402393
}
403-
if (!manualSlotsSupported && panel.hasAttribute('slot')) {
404-
panel.removeAttribute('slot')
405-
}
406394
}
407395

408396
selectedTab.setAttribute('aria-selected', 'true')
409397
selectedTab.setAttribute('tabindex', '0')
410-
if (manualSlotsSupported) {
411-
this.#panelSlot.assign(selectedPanel)
412-
} else {
413-
selectedPanel.setAttribute('slot', 'panel')
414-
}
398+
assignSlotWithFallback(this.#panelSlot, selectedPanel)
415399
selectedPanel.hidden = false
416400

417401
if (this.#setupComplete) {

0 commit comments

Comments
 (0)