Question

我想将indexedDB与lit-element一起使用。为此，我在lit-element项目中导入了@ polymer / app-storage / app-indexeddb-mirror。我的代码的副本为here。 data属性中的值未保存到indexedDB。没有错误。

@polymer 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的不同语法，而对于Polymer模板，您可以添加

之类的属性。

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

对于lit-html，绑定事件侦听器的语法使用@代替on-，并且不会自动对事件名称进行短划线，因此可以使用：

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

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

还请注意，您无需创建lambda表达式即可将事件传递给实例方法，因为lit-html会自动为您绑定该函数。

话虽如此，在更简单的情况下，请考虑使用类似KV-Storage，idb或idb-keyval之类的东西，因为这样一来，最终将以更少的方式向客户交付JavaScript，因为您将不必随身携带整个Polymer库。

将@ Polymer / app-storage与lit-element一起使用

1 个答案: