Как правильно наследовать веб-компоненты с единым connectedCallback?
Доброго времени суток!
Как сделать так, чтобы веб-компоненты правильно наследовались от основного больше всего с общим ConnectedCallback, исходя из примера кода классов по этой ссылке?
Заранее буду вам благодарен!
P.S.: Сам компилятор сильно ругался на один из наследованных мной компонентов:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "subscribers" is not a valid custom element name |
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "subscribers" is not a valid custom element name
.
Хочу именно сделать так, чтобы этих ошибок избежать...
Дополнительно:
Ошибка говорит о том, что неправильно названы имена элементов. Они должны быть через дефис, например, `wc-subscribers `.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для наследования веб-компонентов с единым connectedCallback вам следует использовать классы ES6. Ниже приведен пример кода на языке JavaScript, демонстрирующий правильный способ наследования веб-компонентов с единым connectedCallback:
class BaseComponent extends HTMLElement { connectedCallback() { console.log('Base component connected'); } } class CustomComponent extends BaseComponent { connectedCallback() { super.connectedCallback(); console.log('Custom component connected'); } } customElements.define('base-component', BaseComponent); customElements.define('custom-component', CustomComponent);
В приведенном выше коде класс BaseComponent расширяет HTMLElement и определяет метод connectedCallback, который будет вызываться при подключении элемента к DOM. Затем класс CustomComponent наследует BaseComponent и переопределяет метод connectedCallback, вызывая сначала метод родительского класса с помощью super.connectedCallback(), а затем добавляя свою собственную логику.
После определения классов BaseComponent и CustomComponent с помощью метода customElements.define() вы можете использовать эти компоненты в своем HTML-коде следующим образом:
```html
```
Таким образом, при добавлении элементов и к DOM будет вызван метод connectedCallback как из родительского класса, так и из дочернего класса, что позволит вам наследовать веб-компоненты с единым connectedCallback.