Web Components: customElements.define, həyat dövrü, atributlar və hadisələr

Brauzerlər React və ya Vue olmadan da komponent yaratmağa imkan verir. Bu standartlar toplusu Web Components adlanır: Custom Elements, Shadow DOM və <template>. Bu dərsdə birinci hissəni — öz HTML teqinizi yaratmağı öyrənirik.

Custom element nədir

Custom element — HTMLElement-dən miras alan sinif və ona verilmiş ad (məsələn, <user-badge>). Ad brauzerə customElements.define ilə qeyd olunur.

class HelloBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from a custom element';
  }
}

customElements.define('hello-badge', HelloBadge);

HTML-də isə sadəcə yazırsınız: <hello-badge></hello-badge>.

💡 Ad kiçik hərflərlə olmalı və mütləq tire saxlamalıdır: user-card düzgündür, UserCard və card isə yox. Bu, HTML-in gələcək standart teqləri ilə toqquşmanın qarşısını alır.

Həyat dövrü callback-ləri