Using @Polymer/app-storage with lit-element

Question

I want to use indexedDB with lit-element. To do so, I imported @polymer/app-storage/app-indexeddb-mirror in my lit-element project. A copy of my code is here. The value in the data attribute is not saved to indexedDB. No error is thrown.

Is there any incompatibility between the @polymer webcomponents and lit-element ?

score 0 · Answer 1 · answered Dec 10 '19 at 14:38

Since <app-indexeddb-mirror> is just a web component, you can use it's API in any DOM-friendly library, including in lit-html.

For example:

  render() {
    return html`
      <app-indexeddb-mirror
            key="indexKey"
            data="${this.data}"
            @persisted-data-changed="${this.persistedDataChanged}">
            log
        </app-indexeddb-mirror>
    `;
  }

Note that lit-html has a different syntax for binding event listeners to element.s whereas with Polymer templates, you might add an attribute like

static get template() {
  return html`<input on-change="methodName">`
}

With lit-html, the syntax for binding an event listener uses @ in place of on-, and does not automatically dash-case your event names, so you could use:

html`<my-el @eventName="${referenceToFunction}"></my-el>`

where referenceToFunction is a direct reference to the event handler.

Note also that you don't need to create a lambda expression to pass the event to the instance method, since lit-html will auto-bind that function for you.

That all being said, consider using something like KV-Storage, idb or idb-keyval for simpler cases, as you'll end up shipping much less JavaScript to your clients that way, since you won't have to shlep along the entire Polymer library with you.

Using @Polymer/app-storage with lit-element

1 Answers1