alit-element

AlitElement

A simple base class that extends lit-element with some utility functions.

It also defines decorators, similar to polymer-decorators, which makes development of web components in typescript super easy.

Sample Code

Here's some sample code that showcases decorators. (full code)

@element('alit-card')
export class AlitCard extends AlitElement {
  @property() name?: string;
  @property() age: number = 30;
  @property() image?: string;
  @property() description: string = 'This is the default description';
  
  @query('.card')
  card?: HTMLDivElement;

  @listen('click', '#toggleButton')
  toggleBorder() {
    this.borderShowing = !this.borderShowing;
    this.card!.style.border = this.borderShowing ? '2px solid' : 'none';
  }
  
  @observe('age', 'description')
  ageChanged(records: ChangeRecord[]) {
    for (const r of records) {
      console.log(`${r.path} changed from '${r.oldValue}' to '${r.value}'`);
    }
  }
  
  _render(): TemplateResult {
    return html`
    ...
    ...
    <div class="card">
      ...
    </div>
    ...
    `;
  }

Methods

$(id: string): HTMLElement

Get element with specified ID in the element's shadow root.

const button = this.$('toggleButton');

$$(selector: string): HTMLElement

Find first element macthing the slector in the element's shadow root.

const card = this.$$('.card');

$$All(selector: string): NodeList

Find all elements matching the selector in the element's shadow root.

const allCards = this.$$All('.card');

fireEvent(name: string, detail?: any, bubbles: boolean = true, composed: boolean = true)

Utility method to fire custom events

this.fireEvent('selected');
this.fireEvent('selected', {selection: this.currentSelection});

Decorators

@element(tagname?: string)

Defines a custom element with the associated class

@element('hello-world')
export class HelloWorld extends AlitElement {
  _render() {
    return html`
    <div>Hello World</div>
    `;
  }
}

@property()

Declared a property to be used by LitElement. The type is infered using reflected metadata.

@element('hello-world')
export class HelloWorld extends AlitElement {
  @property() name?: string;
  @property() job?: string;
  @property() age: number = 30;
}

@query(selector: string)

Replace this property with a getter that returns the element matching the specified selector.

@query('.card')
card?: HTMLDivElement;

@queryAll(selector: string)

Replace this property with a getter that returns the NodeList of all elements matching the specified selector.

@queryAll('my-widget')
widgets: NodeListOf<MyWidgetElement>;

@listen(eventName: string, target: string | EventTarget)

Add an event listener for eventName on target. target can be an object reference, or the selector string to find the element in the shadow root.

@listen('click', '#toggleButton')
toggleBorder() {
  this.borderShowing = !this.borderShowing;
}

@listen('click', document)
documentClick() {
  console.log('document clicked');
}

observe(...properties: string[])

Add observers to the specified set of properties. This does not support children of properties or wildcards.

@observe('age', 'description')
ageChanged(records: ChangeRecord[]) {
  // do stuff when age or description changes
}

A ChangeRecord is defined as follows:

interface ChangeRecord {
  path: string; // property name 
  value: any;
  oldValue: any;
}