https://github.com/vdegenne/cherry-on-lit

Extension that adds a $ to LitElement
https://github.com/vdegenne/cherry-on-lit

Last synced: about 2 months ago
JSON representation

Extension that adds a $ to LitElement

• Host: GitHub
• URL: https://github.com/vdegenne/cherry-on-lit
• Owner: vdegenne
• Created: 2020-05-11T21:38:14.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-18T21:20:26.000Z (over 2 years ago)
• Last Synced: 2023-03-02T00:42:02.318Z (almost 2 years ago)
• Language: JavaScript
• Size: 60.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# cherry-on-lit

This package offers a mixin (`CherryOnLit`) you can use to aggregate elements with an `id` attribute in your `LitElement` template.

## Usage

```javascript

import { LitElement, html } from 'lit-element';

import { CherryOnLit } from 'cherry-on-lit';

class MyApp extends CherryOnLit(LitElement) {

  render () {

    return html`

    
loading

    `

  }


  firstUpdate() {

    this.$.myElement.innerText = 'hello anonymous';

  }

}

```

(it also works with `typescript`)

## Installation

```

npm install cherry-on-lit

```

## Notes

Pros: 

- It's easy to install

- You don't need to write all the query functions.

- Even if your dom changes (e.g. add a new element with an id) the element will be available because `$` scans the dom everytime it's used.

Cons:

- Everytime you request `$` it scans the dom, it may affect the performance of your code if your template is massive and you overuse it.

- Your IDE will lose track of the typings because the `$` aggregator is naively querying the elements in the dom without any cast. For this reason I recommand using `typescript` and casting the elements as you request them:

```typescript

const i = this.$.importantInput as HTMLInputElement;

i.value = 'new value';

```