javascript - 如何通过解析 index.html 自定义元素中的值来设置/覆盖 Lit-Element typescript 属性装饰器？

Question

我正在尝试覆盖 lit-element 中的设置属性。我正在使用 Typescript，并且在自定义元素中使用装饰器设置值，尽管当我尝试通过在 index.html 中设置不同的属性来覆盖元素时，它不会覆盖......

当我 console.log 属性时，它只有在 lit-element 中设置的属性。

我将 mixinBehaviours、IronA11yKeysBehavior 和 GestureEventListeners 与 LitElement 一起使用。

使用普通 javascript 表示法时，该属性会覆盖，但如果可能的话，我希望尽可能保留装饰器。

// TypeScript file

class Carousel extends mixinBehaviors([
  IronA11yKeysBehavior,
  GestureEventListeners
], LitElement) {

  /**
   * Carousel direction (horizontal or vertical)
   */
  @property({type: String})
  direction = 'horizontal';
}

// index.html
<carousel direction="vertical"></carousel>

我希望 index.html 中的方向可以覆盖打字稿装饰器属性...

Answer 1

您只是设置属性，而不是属性。设置属性将是.direction. 您可以在此处找到语法参考：https ://lit-html.polymer-project.org/guide/writing-templates#bind-to-properties