自定义元素：class 及其超级运行都可以是 connectedCallback 吗？

Question

我有一个 class 叫 QueryAddable

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

它有几个class扩展它，例如

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

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

我完全可以在 QueryAddable 中放置一个名为 onLoad 的方法，并在每个扩展 class 的 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>

自定义元素：class 及其超级运行都可以是 connectedCallback 吗？

Custom Elements: Can both a class and its super run a connectedCallback?

javascript

web-component

custom-element

自定义元素：class 及其超级 运行 都可以是 connectedCallback 吗？

Custom Elements: Can both a class and its super run a connectedCallback?

javascript

web-component

custom-element

自定义元素：class 及其超级运行都可以是 connectedCallback 吗？