How to use the @material/mwc-base/base-element.js.query function in @material/mwc-base

import {MDCTabInteractionEvent} from '@material/tab/types';

export class TabBarBase extends BaseElement {
  protected mdcFoundation!: MDCTabBarFoundation;

  protected readonly mdcFoundationClass = MDCTabBarFoundation;

  @query('.mdc-tab-bar') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-scroller') protected scrollerElement!: TabScroller;

  // tabsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot') protected tabsSlot!: HTMLElement;

  @observer(async function(this: TabBarBase, value: number) {
    await this.updateComplete;
    // only provoke the foundation if we are out of sync with it, i.e.
    // ignore an foundation generated set.
    if (value !== this._previousActiveIndex) {
      this.mdcFoundation.activateTab(value);
    }
  })
  @property({type: Number})
  activeIndex = 0;

  private _previousActiveIndex = -1;

  private _handleTabInteraction(e: MDCTabInteractionEvent) {
    this.mdcFoundation.handleTabInteraction(e);

import '@material/mwc-tab';
import '@material/mwc-tab-scroller';

import {BaseElement, html, observer, property, query} from '@material/mwc-base/base-element.js';
import {Tab} from '@material/mwc-tab';
import {TabScroller} from '@material/mwc-tab-scroller';
import {MDCTabBarAdapter} from '@material/tab-bar/adapter';
import MDCTabBarFoundation from '@material/tab-bar/foundation';
import {MDCTabInteractionEvent} from '@material/tab/types';

export class TabBarBase extends BaseElement {
  protected mdcFoundation!: MDCTabBarFoundation;

  protected readonly mdcFoundationClass = MDCTabBarFoundation;

  @query('.mdc-tab-bar') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-scroller') protected scrollerElement!: TabScroller;

  // tabsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot') protected tabsSlot!: HTMLElement;

  @observer(async function(this: TabBarBase, value: number) {
    await this.updateComplete;
    // only provoke the foundation if we are out of sync with it, i.e.
    // ignore an foundation generated set.
    if (value !== this._previousActiveIndex) {
      this.mdcFoundation.activateTab(value);
    }

import {BaseElement, html, observer, property, query} from '@material/mwc-base/base-element.js';
import {Tab} from '@material/mwc-tab';
import {TabScroller} from '@material/mwc-tab-scroller';
import {MDCTabBarAdapter} from '@material/tab-bar/adapter';
import MDCTabBarFoundation from '@material/tab-bar/foundation';
import {MDCTabInteractionEvent} from '@material/tab/types';

export class TabBarBase extends BaseElement {
  protected mdcFoundation!: MDCTabBarFoundation;

  protected readonly mdcFoundationClass = MDCTabBarFoundation;

  @query('.mdc-tab-bar') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-scroller') protected scrollerElement!: TabScroller;

  // tabsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot') protected tabsSlot!: HTMLElement;

  @observer(async function(this: TabBarBase, value: number) {
    await this.updateComplete;
    // only provoke the foundation if we are out of sync with it, i.e.
    // ignore an foundation generated set.
    if (value !== this._previousActiveIndex) {
      this.mdcFoundation.activateTab(value);
    }
  })
  @property({type: Number})

property({ type: String }),
    observer(async function (label) {
        const input = this.input;
        if (input) {
            if (input.localName === 'input') {
                input.setAttribute('aria-label', label);
            }
            else if (input instanceof FormElement) {
                await input.updateComplete;
                input.setAriaLabel(label);
            }
        }
    })
], Formfield.prototype, "label", void 0);
__decorate([
    query('.mdc-form-field')
], Formfield.prototype, "mdcRoot", void 0);
__decorate([
    query('slot')
], Formfield.prototype, "slotEl", void 0);
__decorate([
    query('label')
], Formfield.prototype, "labelEl", void 0);
customElements.define('mwc-formfield', Formfield);
//# sourceMappingURL=mwc-formfield.js.map

}
            else if (input instanceof FormElement) {
                await input.updateComplete;
                input.setAriaLabel(label);
            }
        }
    })
], Formfield.prototype, "label", void 0);
__decorate([
    query('.mdc-form-field')
], Formfield.prototype, "mdcRoot", void 0);
__decorate([
    query('slot')
], Formfield.prototype, "slotEl", void 0);
__decorate([
    query('label')
], Formfield.prototype, "labelEl", void 0);
customElements.define('mwc-formfield', Formfield);
//# sourceMappingURL=mwc-formfield.js.map

if (input) {
            if (input.localName === 'input') {
                input.setAttribute('aria-label', label);
            }
            else if (input instanceof FormElement) {
                await input.updateComplete;
                input.setAriaLabel(label);
            }
        }
    })
], Formfield.prototype, "label", void 0);
__decorate([
    query('.mdc-form-field')
], Formfield.prototype, "mdcRoot", void 0);
__decorate([
    query('slot')
], Formfield.prototype, "slotEl", void 0);
__decorate([
    query('label')
], Formfield.prototype, "labelEl", void 0);
customElements.define('mwc-formfield', Formfield);
//# sourceMappingURL=mwc-formfield.js.map