Javascript 自定义元素：类和它的超级类都可以运行connectedCallback吗？

我有一个名为

QueryAddable

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

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

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

最理想的情况是，如果我将

放在页面上，我希望看到

QueryAddable

和

QueryGroup

登录到控制台中。我想这不会发生，因为我的页面上只有

，而没有

我可以很好地在

QueryAddable

中放置一个名为

onLoad

的方法，并在每个扩展类的

connectedCallback

中调用它，但是为什么我必须在多个位置而不是一个位置执行它呢

有没有办法让两个

connectedCallback

函数都运行，或者设置为只有一个函数可以运行？

类父级扩展HtmleElement{
connectedCallback（）{
log（“父组件”）；
}
}
类子级扩展父级{
connectedCallback（）{
super.connectedCallback（）；
log（“子组件”）；
}
}
window.customElements.define（'my-child'，child）
只需调用
super.connectedCallback（）
？请不要自己调用
connectedCallback
，尤其不要在构造函数中调用。您可能违反组件构造函数的规则：@Intervalia您的链接是关于构造函数的。关于
connectedCallback
它唯一说明的是，大多数工作应该推迟到
connectedCallback
，并且在
connectedCallback
中完成的初始化应该进行检查，以确保它们只执行一次。如果从构造函数调用
connectedCallback
，则规则仍然适用。这就是为什么我强烈建议不要自己调用
connectedCallback
，尤其不要从构造函数调用
connectedCallback
只有当您的组件添加到有效文档中时，浏览器才应该调用它。@Bennyhinrich他对构造函数的看法是正确的，我刚才给了您一个示例，您几乎可以在任何地方调用它，顺便说一句，众所周知，构造函数用于初始化，而不用于API调用等副作用。我删除了构造函数示例，这样它就不会强迫人们在那里产生副作用。@idmitrov我刚刚检查了编辑，看到您最初在构造函数中有
connectedCallback
，所以我现在理解了他的评论：）谢谢你的回复