Для правильного наследования веб-компонентов с единым 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
, вы можете добавить и расширить функциональность базового класса, сохраняя при этом его поведение.