A simple base class that extends lit-element with some utility functions and adds decorators
MIT License
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.
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>
...
`;
}
Get element with specified ID in the element's shadow root.
const button = this.$('toggleButton');
Find first element macthing the slector in the element's shadow root.
const card = this.$$('.card');
Find all elements matching the selector in the element's shadow root.
const allCards = this.$$All('.card');
Utility method to fire custom events
this.fireEvent('selected');
this.fireEvent('selected', {selection: this.currentSelection});
Defines a custom element with the associated class
@element('hello-world')
export class HelloWorld extends AlitElement {
_render() {
return html`
<div>Hello World</div>
`;
}
}
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;
}
Replace this property with a getter that returns the element matching the specified selector.
@query('.card')
card?: HTMLDivElement;
Replace this property with a getter that returns the NodeList of all elements matching the specified selector.
@queryAll('my-widget')
widgets: NodeListOf<MyWidgetElement>;
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');
}
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;
}