diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts index b7731dd3c..9e0698512 100644 --- a/tabs/internal/tab.ts +++ b/tabs/internal/tab.ts @@ -35,6 +35,14 @@ export class Tab extends LitElement { setupHostAria(Tab); } + /** + * The attribute `md-tab` indicates that the element is a tab for the parent + * element, ``. Make sure if you're implementing your own `md-tab` + * component that you have an `md-tab` attribute set. + */ + @property({type: Boolean, reflect: true, attribute: 'md-tab'}) + readonly isTab = true; + /** * Whether or not the tab is selected. **/ diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts index 8fa166689..e63549bbb 100644 --- a/tabs/internal/tabs.ts +++ b/tabs/internal/tabs.ts @@ -45,9 +45,8 @@ export class Tabs extends LitElement { /** * The tabs of this tab bar. */ - get tabs() { - return this.maybeTabs.filter(isTab); - } + @queryAssignedElements({flatten: true, selector: '[md-tab]'}) + readonly tabs!: Tab[]; /** * The currently selected tab, `null` only when there are no tab children. @@ -106,8 +105,6 @@ export class Tabs extends LitElement { @property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false; @query('slot') private readonly slotElement!: HTMLSlotElement|null; - @queryAssignedElements({flatten: true}) - private readonly maybeTabs!: HTMLElement[]; private get focusedTab() { return this.tabs.find(tab => tab.matches(':focus-within')); @@ -307,5 +304,5 @@ export class Tabs extends LitElement { } function isTab(element: unknown): element is Tab { - return element instanceof Tab; -} + return element instanceof HTMLElement && element.hasAttribute('md-tab'); +} \ No newline at end of file