如何访问 Web 组件上的 observedAttributes

Question

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

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

我如何 list/access 从我的子 class 中观察到的属性？

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

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

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

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

这里有一个 jsbin 可以玩。

谢谢！

Answer 1

找到了！： constructor可以使用：

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'];
  }
}

如何访问 Web 组件上的 observedAttributes

How to access observedAttributes on Web Components

html

javascript

web-component

ecmascript-6

es6-class