Lit / LitElement ReactiveElement静态属性

Question

Lit使用这个reactive element class，我的每个web组件都扩展了它。我搞不懂为什么像elementProperties这样的静态属性在所有扩展Lit基类的web组件上都是不一样的。

See example here

为什么这两个类的静态属性不同？我认为静态属性是在类本身上设置的，在本例中是ReactiveElement。但这里似乎不是这样。我希望elementProperties和here是一样的，工作起来也差不多。

有没有人能告诉我我的想法哪里错了？

更新：

OK用typescript重现了这种行为。所以我想我需要研究一下继承和静态属性在JS中是如何工作的。

Answer 1

所以我认为正在发生的是；

在名为finalize的静态方法中设置elementProperties

当调用finalise时，this引用组件的类，而不是reactive element类。所以是SimpleGreeting.elementProperties而不是ReactiveElement.elementProperties。

尽管ReactiveElement.elementProperties存在于SimpleGreeting.Object.getPrototypeOf(Object.getPrototypeOf(SimpleGreeting)).elementProperties的原型链中。因为我们已经在SimpleGreeting属性上设置了elementProperties，所以它本身并不引用原型链上的ReactiveElement.elementProperties。