|
1 | 1 | 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 | + } |
3 | 18 |
|
4 | 19 | export class TabContainerChangeEvent extends Event {
|
5 | 20 | constructor(
|
@@ -289,32 +304,14 @@ export class TabContainerElement extends HTMLElement {
|
289 | 304 | const customTabListWrapper = this.querySelector('[slot=tablist-wrapper]')
|
290 | 305 | const customTabListTabWrapper = this.querySelector('[slot=tablist-tab-wrapper]')
|
291 | 306 | 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) |
297 | 308 | } 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) |
303 | 310 | } 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) |
309 | 312 | } else {
|
310 | 313 | 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]'))) |
318 | 315 | }
|
319 | 316 | const tabList = this.#tabList
|
320 | 317 | this.#reflectAttributeToShadow('aria-description', tabList)
|
@@ -349,15 +346,9 @@ export class TabContainerElement extends HTMLElement {
|
349 | 346 | autoSlotted.push(child)
|
350 | 347 | }
|
351 | 348 | }
|
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) |
361 | 352 | }
|
362 | 353 | const defaultTab = this.defaultTabIndex
|
363 | 354 | const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
|
@@ -400,18 +391,11 @@ export class TabContainerElement extends HTMLElement {
|
400 | 391 | if (!panel.hasAttribute('tabindex') && !panel.hasAttribute('data-tab-container-no-tabstop')) {
|
401 | 392 | panel.setAttribute('tabindex', '0')
|
402 | 393 | }
|
403 |
| - if (!manualSlotsSupported && panel.hasAttribute('slot')) { |
404 |
| - panel.removeAttribute('slot') |
405 |
| - } |
406 | 394 | }
|
407 | 395 |
|
408 | 396 | selectedTab.setAttribute('aria-selected', 'true')
|
409 | 397 | 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) |
415 | 399 | selectedPanel.hidden = false
|
416 | 400 |
|
417 | 401 | if (this.#setupComplete) {
|
|
0 commit comments