Как правильно наследовать веб-компоненты с единым connectedCallback?

Для правильного наследования веб-компонентов с единым connectedCallback, необходимо использовать концепцию наследования классов в JavaScript.

Первым шагом является создание базового класса для нашего веб-компонента. В этом классе мы определяем connectedCallback для обработки подключения элемента к документу. Например:

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

Затем мы создаем наш производный класс, который наследует базовый класc. В этом классе мы можем добавить дополнительную логику или переопределить уже существующую, но все-таки сохраняем вызов connectedCallback базового класса. Для этого мы используем ключевое слово super:

class DerivedComponent extends BaseComponent {
  connectedCallback() {
    super.connectedCallback(); // вызов connectedCallback базового класса
    console.log('DerivedComponent connected');
  }
}

Теперь мы можем создать и подключить экземпляр нашего производного компонента к документу. Когда элемент будет добавлен в документ, будет вызван метод connectedCallback и мы увидим в консоли сообщения из обоих классов:

customElements.define('base-component', BaseComponent);
customElements.define('derived-component', DerivedComponent);

const baseElement = document.createElement('base-component');
document.body.appendChild(baseElement);

const derivedElement = document.createElement('derived-component');
document.body.appendChild(derivedElement);

В консоли вы увидите:

BaseComponent connected
BaseComponent connected
DerivedComponent connected

Как видите, оба метода connectedCallback базового и производного класса были вызваны при подключении элементов к документу.

Таким образом, наследуя веб-компоненты с единым connectedCallback, вы можете добавить и расширить функциональность базового класса, сохраняя при этом его поведение.