javascript - 如何访问 Web 组件上的 observedAttributes

Question

所以在 Web Components 中你可以使用 attributeChangedCallback一旦您指定了要观察的属性，请使用:

static get observedAttributes() { return ['myAttribute']; }

如何从我的子类中列出/访问观察到的属性？

class Foo extends HTMLElement {
    connectedCallback() {
        console.log(this.observedAttributes); // <= undefined
    }
}

class Bar extends Foo {
    static get observedAttributes() {
        return ['bar'];
    }
}

这有可能吗？观察到的属性有getter吗？

我认为这里的难点在于获取父类的observedAttributes。因为如果它在同一个类上，您可以像@javimovi 提到的那样Foo.observedAttributes。

这是一个jsbin一起玩。

谢谢!

Answer 1

找到了!:可以使用构造函数:

Returns a reference to the Object constructor function that created the instance object

使用前面提到的例子。

class Foo extends HTMLElement {
  connectedCallback() {
    console.log(this.constructor.observedAttributes); // <= ['bar']
  }
}

class Bar extends Foo {
  static get observedAttributes() {
    return ['bar'];
  }
}