Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

alit-element

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

alit-element

A simple wrapper for lit-element with some enhanced functions

  • 0.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5
decreased by-28.57%
Maintainers
1
Weekly downloads
 
Created
Source

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;
}

Keywords

FAQs

Package last updated on 13 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc