将@Polymer/app-storage与lit-element配合使用

Question

我想使用带有lit-element的indexedDB。为此，我在我的lit-element项目中导入了@聚合物/app-storage/app-indexeddb-mirror。我的代码副本是here。数据属性中的值不会保存到indexedDB。不会抛出错误。

是否有任何不兼容的@聚合物webcomponents和lit-element？

Answer 1

由于<app-indexeddb-mirror>只是一个web组件，您可以在任何DOM友好的库中使用它的API，包括在lit-html中。

例如：

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

请注意，lit html具有不同的语法来将事件侦听器绑定到element.s，而对于聚合物模板，您可能会添加如下属性

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

在lit-html中，绑定事件侦听器的语法使用@代替on-，并且不会自动使用破折号来区分事件名称的大小写，因此可以使用：

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

其中referenceToFunction是对事件处理程序的直接引用。

还要注意，您不需要创建lambda表达式来将事件传递给实例方法，因为‘t html将为您自动绑定该函数。

话虽如此，在更简单的情况下，可以考虑使用像KV-Storage、idb或idb-keyval这样的东西，因为这样你向客户发送的JavaScript就会少得多，因为你不必随身携带整个聚合物库。