How to use the lit-element.query function in lit-element

} from "lit-element";
import "../ha-icon";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { stateIcon } from "../../common/entity/state_icon";
import { HassEntity } from "home-assistant-js-websocket";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { HaIcon } from "../ha-icon";
import { HomeAssistant } from "../../types";

class StateBadge extends LitElement {
  public hass?: HomeAssistant;
  @property() public stateObj?: HassEntity;
  @property() public overrideIcon?: string;
  @property() public overrideImage?: string;
  @query("ha-icon") private _icon!: HaIcon;

  protected render(): TemplateResult | void {
    const stateObj = this.stateObj;

    if (!stateObj) {
      return html``;
    }

    return html`
      
    `;

import {MDCTabAdapter} from '@material/tab/adapter';
import MDCTabFoundation from '@material/tab/foundation';
import {html, property, query} from 'lit-element';
import {classMap} from 'lit-html/directives/class-map';

import {style} from './mwc-tab-css';

// used for generating unique id for each tab
let tabIdCounter = 0;

export class TabBase extends BaseElement {
  protected mdcFoundation!: MDCTabFoundation;

  protected readonly mdcFoundationClass = MDCTabFoundation;

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

  @query('mwc-tab-indicator') protected tabIndicator!: TabIndicator;

  @property() label = '';

  @property() icon = '';

  @property({type: Boolean}) isFadingIndicator = false;

  @property({type: Boolean}) minWidth = false;

  @property({type: Boolean}) isMinWidthIndicator = false;

  @property({type: Boolean, reflect: true, attribute: 'active'})
  get active(): boolean {
    return this._active;

import { DOCS_URL } from "../../constants";
import "../../elements/footer/footer-element";
import { getMainScrollContainer } from "../../main-scroll-target";
import { sharedStyles } from "../../style/shared";

import styles from "./elements-page.scss";
import { COMPONENTS_ROUTES, IRouteData } from "./elements-routes";

@customElement("elements-page")
export default class ElementsPage extends LitElement {

	static styles = [sharedStyles, cssResult(styles)];
	private currentRoute?: IRoute;

	@query("#router") protected $routerContainer: HTMLDivElement;
	@query("#router-slot") protected $routerSlot: RouterSlot;
	@property({type: Boolean, reflect: true, attribute: "popover-visible"}) isPopoverVisible = false;

	firstUpdated (props: PropertyValues) {
		super.firstUpdated(props);

		this.$routerSlot.add(COMPONENTS_ROUTES);

		this.$routerSlot.addEventListener(RouterSlotEventKind.ChangeState, (e: ChangeStateEvent) => {
			this.currentRoute = this.$routerSlot.match!.route;
			getMainScrollContainer().scrollTo({top: 0, left: 0});
			this.requestUpdate().then();

			// Register that the parent has finished routing
			if (!this.hasAttribute("routed")) {
				this.setAttribute("routed", "");
			}

duration?: number;
  dismissable?: boolean;
}

export interface ToastActionParams {
  action: () => void;
  text: string;
}

class NotificationManager extends LitElement {
  @property() public hass!: HomeAssistant;

  @property() private _action?: ToastActionParams;
  @property() private _noCancelOnOutsideClick: boolean = false;

  @query("ha-toast") private _toast!: HaToast;

  public async showDialog({
    message,
    action,
    duration,
    dismissable,
  }: ShowToastParams) {
    let toast = this._toast;
    // Can happen on initial load
    if (!toast) {
      await this.updateComplete;
      toast = this._toast;
    }
    toast.setAttribute("dir", computeRTL(this.hass) ? "rtl" : "ltr");
    this._action = action || undefined;
    this._noCancelOnOutsideClick =

import { LitElement, customElement, property, css, TemplateResult, html, CSSResultArray, query } from 'lit-element';
import { repeat } from 'lit-html/directives/repeat';
import { BaseCSS } from 'wired-lib/lib/wired-base';

interface WiredTabItem extends HTMLElement {
  name: string;
  label: string;
  wiredRender(force?: boolean): void;
}

@customElement('wired-tabs')
export class WiredTabs extends LitElement {
  @property({ type: String }) selected?: string;
  @query('slot') private slotElement?: HTMLSlotElement;

  private pages: WiredTabItem[] = [];
  private pageMap = new Map();
  private current?: WiredTabItem;

  static get styles(): CSSResultArray {
    return [
      BaseCSS,
      css`
        :host {
          display: block;
          opacity: 1;
        }
        ::slotted(.hidden) {
          display: none !important;
        }

import MDCTabIndicatorFoundation from '@material/tab-indicator/foundation';
import MDCSlidingTabIndicatorFoundation from '@material/tab-indicator/sliding-foundation.js';
import {html, property, PropertyValues, query} from 'lit-element';
import {classMap} from 'lit-html/directives/class-map';

export class TabIndicatorBase extends BaseElement {
  protected mdcFoundation!: MDCTabIndicatorFoundation;

  protected get mdcFoundationClass() {
    return this.fade ? MDCFadingTabIndicatorFoundation :
                       MDCSlidingTabIndicatorFoundation;
  }

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

  @query('.mdc-tab-indicator__content') protected contentElement!: HTMLElement;

  @property() icon = '';

  @property({type: Boolean}) fade = false;

  protected render() {
    const contentClasses = {
      'mdc-tab-indicator__content--icon': this.icon,
      'material-icons': this.icon,
      'mdc-tab-indicator__content--underline': !this.icon,
    };
    return html`
      <span class="mdc-tab-indicator ${classMap({
      'mdc-tab-indicator--fade': this.fade
    })}">
        <span class="mdc-tab-indicator__content ${classMap(contentClasses)}">${</span></span>

@customElement('ol-swiss-cantons')
export default class OlSwissCantons extends LitElement {
    @property({ type: Boolean, attribute: 'no-map', reflect: true })
    noMap: boolean = false

    @property({ type: String, attribute: false })
    selected: string

    @property({ type: Number, attribute: 'fit-animation-ms' })
    fitAnimationMs: number = 500

    @query('ol-map')
    mapElement: OlMap

    @query('ol-wkt-layer')
    layerElement: OlWktLayer

    cantonLayers = endpoint.selectQuery(sparql)
        .then(r => r.json())
        .then(json => json.results.bindings)
        .then(bindings => bindings.map(b => ({
            wkt: b.cantonShape.value,
            id: b.canton.value,
            props: { name: b.cantonShapeLabel.value },
        })))
        .then(features => {
            return html``
        })

    updateSelection(e: CustomEvent) {
        if (!e.detail.value) {

import { classMap } from 'lit-html/directives/class-map';
import settings from 'carbon-components/es/globals/js/settings';
import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
import CaretUp16 from '@carbon/icons/lib/caret--up/16';
import CaretDown16 from '@carbon/icons/lib/caret--down/16';
import styles from './number-input.scss';
import BXInput from '../input/input';

const { prefix } = settings;

@customElement(`${prefix}-number-input`)
export default class BXNumberInput extends BXInput {
  /**
   * The underlying input element
   */
  @query('input')
  protected _input!: HTMLInputElement;

  /**
   * Handles incrementing the value in the input
   */
  protected _handleIncrement() {
    this._input.stepUp();
  }

  /**
   * Handles decrementing the value in the input
   */
  protected _handleDecrement() {
    this._input.stepDown();
  }

import settings from 'carbon-components/es/globals/js/settings';
import { html, property, query, customElement, LitElement } from 'lit-element';
import BXTableRow from './table-row';
import styles from './data-table.scss';

const { prefix } = settings;

/**
 * Data table body.
 */
@customElement(`${prefix}-table-body`)
class BXTableBody extends LitElement {
  /**
   * The `` element in the shadow DOM.
   */
  @query('slot')
  private _slotNode!: HTMLSlotElement;

  /**
   * Updates `even`/`odd` properties of the child ``s.
   */
  private _updateZebra() {
    const { zebra, _slotNode: slotNode } = this;
    slotNode.assignedNodes().forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const odd = (node as HTMLElement).matches('*:nth-of-type(odd)');
        (node as BXTableRow).even = zebra && !odd;
        (node as BXTableRow).odd = zebra && odd;
      }
    });
  }

import {MDCLinearProgressAdapter} from '@material/linear-progress/adapter.js';
import MDCLinearProgressFoundation from '@material/linear-progress/foundation.js';
import {addHasRemoveClass, BaseElement, observer} from '@material/mwc-base/base-element.js';
import {html, property, query} from 'lit-element';

export class LinearProgressBase extends BaseElement {
  protected mdcFoundation!: MDCLinearProgressFoundation;

  protected readonly mdcFoundationClass = MDCLinearProgressFoundation;

  @query('.mdc-linear-progress') protected mdcRoot!: HTMLElement;

  @query('.mdc-linear-progress__primary-bar')
  protected primaryBar!: HTMLElement;

  @query('.mdc-linear-progress__buffer') protected bufferElement!: HTMLElement;

  @property({type: Boolean, reflect: true})
  @observer(function(this: LinearProgressBase, value: boolean) {
    this.mdcFoundation.setDeterminate(value);
  })
  determinate = false;

  @property({type: Number})
  @observer(function(this: LinearProgressBase, value: number) {
    this.mdcFoundation.setProgress(value);
  })
  progress = 0;

  @property({type: Number})
  @observer(function(this: LinearProgressBase, value: number) {
    this.mdcFoundation.setBuffer(value);