HTML5-ը հնարավորություն է տալիս ստեղծել կրկնակի օգտագործման դինամիկ էլեմենտներ՝ օգտագործելով ընդամենը մի քանի տող կոդ: Ընդ որում, ոչ մի լրացուցիչ ֆրոնտենդ ֆրեյմվորքի կարիք չի լինի:
Այսպիսով, եկեք ստեղծենք հատուկ կոմպոնենտ՝ ողջույնի հաղորդագրությունը ցուցադրելու համար:
Սեփական էլեմենտի ստեղծումը՝ “Hello World!” ցուցադրելու համար:

Օգտագործման տարբերակի սցենար. անհրաժեշտ է ստեղծել հատուկ էլեմենտ, որը կցուցադրի “Hello World!` ամեն տեղ, որտեղ նա աշխատում է:
Անհատական HTML էլեմենտ ստեղծելու համար անհրաժեշտ քայլերը:
- Մենք ստեղծում ենք նոր կլաս, որը ներկայացնում է նոր էլեմենտը:
- Ընդլայնում ենք
HTMLElement
կլասից: - Կլասի մեջ ավելացնում ենք
connectCallback
ֆունկցիան՝ դոկումենտում էլեմենտ ավելացնելիս DOM էլեմենտ հասանելիություն ունենալու համար: - Ստանում ենք հասանելիություն DOM էլեմենտին՝
this
բանալի բառի օգնությամբ։ - Օգտագործում ենք DOM էլեմենտը՝ էլեմենտի հատկություններին մուտք գործելու և փոփոխություններ կատարելու համար։
- Ավելացնում ենք նոր, մեր սեփական HTML էլեմենտը:
HTMLElement-ի միջոցով կլասի ստեղծում եւ ընդլայնում
Եկեք դիտարկենք յուրաքանչյուր փուլ, յուրաքանչյուր քայլը եւ ստեղծենք մի նոր կոմպոնենտ, որը կցուցադրի “Hello World!” ողջույնի հաղորդագրությունը: Դա կլինի բազմակի օգտագործման կոմպոնենտ: Այնպես որ, ամեն տեղ, որտեղ մենք գործարկում ենք HTML էլեմենտը, այն ցույց կտա “Hello World!”-ը:
class CurrentTime extends HTMLElement {
}
Այս կոդում մենք ստեղծում ենք կլաս, որը կոչվում է CurrentTime
, որը ընդլայնվում է HTMLElement
կլասից: Այնուհետեւ մենք կավելացնենք connectedCallback
ֆունկցիան կլասին եւ կկարգավորենք innerHTML
կոմպոնենտի հատկությունը այդ ֆունկցիայի ներսում՝ օգտագործելով this
բանալի բառը:
ConnectedCallback
ֆունկցիայի ավելացումը և հասանելիությունն էլեմենտին
class Salutation extends HTMLElement {
connectedCallback() {
this.innerHTML = `Hello World...
`;
this.style.color = "red"; } }
Այս կոդի մեջ մենք ավելացրել ենք connectedCallback
ֆունկցիան: Այն կանչվում է, երբ էլեմենտը ցուցադրվում է բրաուզերում: Երբ կոմպոնենտը հայտնվում է բրաուզերում եւ ֆունկցիան կանչվում է, մենք կարող ենք էլեմենտին հասանելիություն ունենալ this
բանալի բառով: Վերոնշյալ կոդում մենք փորձում ենք հասանելիություն ստանալ էլեմենտին՝ օգտագործելով this բանալի բառը եւ թարմացնել էլեմենտի երկու հատկություններ՝
innerHTML.
style.color.
Անհատական կոմպոնենտի գրանցում
Որպեսզի էլեմենտը հասանելի լինի HTML-ում օգտագործման համար, անհրաժեշտ է սահմանել այն թեգը, որը ներկայացնում է այդ կլասը: Իսկ անհատական էլեմենտը սահմանելու համար պետք է կիրառել customElement
հատկությունը եւ դրա օգնությամբ սահմանել էլեմենտը.
class Salutation extends HTMLElement {
connectedCallback() {
this.innerHTML = `Hello World...
`;
this.style.color = "red"; } }
customElements.define('salutation-element', Salutation);
Այս կոդի մեջ մենք գրանցում ենք նոր salutation-element
կոմպոնենտ, որը ներկայացնում է մեր ստեղծած կլասը: Այժմ այս նոր salutation-element
կոմպոնենտը կարելի է օգտագործել ճիշտ այնպես, ինչպես ցանկացած այլ HTML թեգ:
Անհատական salutation-element էլեմենտի կիրառումը
Վերոնշյալ կոդում մենք գրանցում ենք salutation-element
էլեմենտը: Այս էլեմենտը ներկայացված է Salutation
նոր կլասով, որը մենք արդեն իսկ սահմանել ենք: Երբ էլեմենտը գրանցված է, այն կարող է օգտագործվել HTML-էջի ներսում.
‹!DOCTYPE html›
‹head›
‹title›Creating Custom Elements›‹/title›
‹script src="./indexOne.js"›‹/script›
‹/head›
‹body›
‹salutation-element›‹/salutation-element›
‹/body›
‹/html›
Այս HTML ֆայլում մենք օգտագործում ենք անհատական սահմանված էլեմենտը: Եվ այժմ այս կոմպոնենտը կարող է բազմիցս օգտագործվել HTML էջի ներսում:
Այստեղ կարելի է փոփոխություններ կատարել ֆունկցիոնալության մեջ եւ թարմացնել անհատական էլեմենտը ըստ այս կամ այն պահանջների: Փորձեք!
Դուք կարող եք նաեւ ավելացնել գործառույթներ, որոնք կարող են ընդլայնել կոմպոնենտը, որպեսզի ողջույնի հաղորդագրությունը ավելի դինամիկ լինի՝ փոխանցելով այն անունը, որը կցուցադրվի ողջույնի հաղորդագրության ներսում: Բայց դա մեկ այլ հոդվածի թեմա է:
Սկզբնաղբյուր՝ Create Custom HTML Element without any Frontend Framework
Թարգմանությունը՝ Mariam Abrahamyan