Уточнение
В DOM уже встроено способ для создания пользовательских элементов и способ этот полностью поддерживаться создателями DOM. И что бы вы не создали, не превзойдет уже встроенный создателями вариант. Поэтому я предлагаю такое решение.
Для создания пользовательских элементов в DOM, существуют следующие способы:
1. Новые элементы
Абсолютно новый элемент который не похож ни на одну из встроенных элементов HTML.
Создается класс, который наследуется от HTMLElement
и зарегистрируется с помощью customElements.define()
:
class MyTagElement extends HTMLElement {
connectedCallback() {
this.innerText += `Я пользовательский элемент\n`;
this.innerText += `Мой id - ${this.id}\n`;
this.innerText += `Мои аттрибуты: - ${[...this.attributes].map(attr => attr.name).join(`, `)}\n`;
this.innerText += `Мои классы: - ${[...this.classList].join(`, `)}\n`;
}
}
customElements.define(`my-tag`, MyTagElement);
<my-tag id="my-id" class="my-class" attribute="my-attribute"></my-tag>
Новые элементы поддерживают стандартные свойства и методы обычных элементов в DOM, в том числе id
, class
, style
и другие аттрибуты.
2. Измененные элементы
Элементы, которые модифицируют / улучшают какой-то функционал уже встроенных элементов.
Измененные элементы наследуются от встроенных классов и при регистрации отмечаются с помощью { extends: `` }
:
class MyParagraphElement extends HTMLParagraphElement {
connectedCallback() {
this.innerText = `Я дополнение к тегу <p>, который изначально дает ему текст.`;
}
}
customElements.define(`my-p`, MyParagraphElement, { extends: `p` });
<p is="my-p"></p>
Измененные элементы поддерживают стандартные свойства и методы наследуемого элемента и выполняют функционал не меньше, чем наследуемый элемент.
Для "жизнеобеспечения" пользовательских элементов используются специальные методы:
connectedCallback()
вызывается каждый раз, когда пользовательский элемент HTML добавляется в DOM.
disconnectedCallback()
вызывается каждый раз, когда пользовательский элемент HTML удаляется из DOM.
adoptedCallback()
вызывается каждый раз, когда пользовательский элемент HTML перемещается в новый элемент.
attributeChangedCallback()
вызывается при каждом изменении (добавлении, изменении значения или удаления) атрибута пользовательского элемента HTML.
А название пользовательских элементов принято писать через тире, чтобы не конфликтовали со встроенными, в новых версиях HTML.