CustomElementRegistry.define() - визначає новий елемент користувача.
customElements.define(name, constructor, options);
customElements - об'єкт CustomElementRegistry.
name - рядок з назвою елемента користувача. Рекомендовано назву елемента користувача давати в стилі kebab-case. Це пов'язано з тим щоб новий елемент мав унікальну назву і не мав конфлікту з поточними HTML тегами або в майбутньому. Наприклад: "my-element".
constructor - конструктор елемента. Вказується class web-компонента.
class назва_компонента extends HTMLElement{
constructor(){
//конструктор
super(); //виклик батьківського конструктора
}
connectedCallback(){
//викликається кожен раз, коли елемент вставляється в DOM
}
disconnectedCallback(){
//викликається кожен раз, коли елемент видаляється з DOM
}
attributeChangedCallback(attrName, oldVal, newVal){
//викликається, коли спостережуваний атрибут додано, видалено, оновлено або замінено
}
adoptedCallback(){
//елемент користувача переміщено у новий document
}
set назва_атрибуту(value){
//задається значення властивості елемента користувача
}
get назва_атрибуту(){
//отримується значення властивості елемента користувача
}
}
options - параметри елемента.
define() метод об'єкта CustomElementRegistry який визначає новий елемент користувача.
<my-component></my-component>
class MyComponent extends HTMLElement{
constructor(){
super();
this.input=document.createElement('input');
this.input.addEventListener('input', function(){
this.parentElement.label.innerText=this.value;
});
this.appendChild(this.input);
this.label=document.createElement('label');
this.appendChild(this.label);
}
}
customElements.define("my-component", MyComponent);
<my-img text="Приклад my-img" src="/dani/test.png"></my-img>
class MyImg extends HTMLElement{
constructor(){
super();
var shadow=this.attachShadow({mode:'open'});
var div = document.createElement('div');
div.className='my-img-conteiner';
this._img=document.createElement('img');
this._img.src=this.getAttribute('src');
this._img.className='my-img-img';
div.appendChild(this._img);
this._text=document.createElement('div');
this._text.className='my-img-text';
this._text.innerText=this.getAttribute('text');
div.appendChild(this._text);
var style=document.createElement('style');
style.textContent='.my-img-conteiner{text-align:center;}.my-img-img{padding:1px;}.my-img-text{color:#737373;}';
shadow.append(div);
shadow.append(style);
}
set src(value){
this.setAttribute('src', value);
this._img.src=value;
}
get src(){
return this._img.src;
}
set text(value){
this.setAttribute('text', value);
this._text.innerText=value;
}
get text(){
return this._text.innerText;
}
}
customElements.define("my-img", MyImg);