javascript - 自定义元素 : Can both a class and its super run a connectedCallback?

Question

我有一个类叫做 QueryAddable

class QueryAddable extends HTMLElement {
  connectedCallback() {
    console.log('QueryAddable');
  }

它有几个扩展它的类，比如

class QueryGroup extends QueryAddable {
  constructor() {
    super();
  }
  connectedCallback() {
    console.log('QueryGroup');
  }

最理想的情况是，如果我输入 <query-group>在页面上，我想看到 QueryAddable和 QueryGroup登录控制台。我想这不会发生，因为我只有 <query-group>在页面上而不是 <query-addable> .

我可以很好地在 QueryAddable 中放入一个方法称为 onLoad并在 connectedCallback 中调用它每个扩展类，但为什么我必须在多个地方而不是一个地方做？

有没有办法同时获得 connectedCallback要运行的功能，还是设置为只有一个可以运行？

Answer 1

class Parent extends HTMLElement {
  connectedCallback() {
    console.log('PARENT COMPONENT');
  }
}

class Child extends Parent {
  connectedCallback() {
    super.connectedCallback();
    console.log('CHILD COMPONENT');
  }
}

window.customElements.define('my-child', Child);

<my-child></my-child>