JavaScript Academy · Pelajaran

Mendefinisikan Elemen Khusus

Daftarkan elemen dengan API customElements.

Mendefinisikan Elemen Khusus adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Elemen Kustom?

Elemen kustom memungkinkan Anda mendefinisikan tag HTML sendiri yang didukung oleh kelas JavaScript. Alih-alih menyatukan kumpulan div, Anda membuat komponen yang dapat digunakan ulang dan mandiri seperti <user-card>.

Elemen ini merupakan bagian dari standar Komponen Web.
Elemen ini bekerja secara asli di peramban, tanpa memerlukan kerangka kerja.
Nama elemen kustom harus mengandung tanda hubung, misalnya my-button.

Registri customElements

Peramban menyediakan registri global di window.customElements. Anda mendaftarkan tag baru dengan memanggil customElements.define(name, constructor).

Setelah didefinisikan, setiap tag yang cocok di dokumen akan diubah menjadi instans kelas Anda.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

Memperluas HTMLElement

Elemen kustom adalah kelas yang extends HTMLElement. Kelas dasar memberikan semua kemampuan DOM standar kepada elemen Anda, seperti atribut, peristiwa, dan gaya.

Selalu panggil super() terlebih dahulu dalam konstruktor agar elemen diinisialisasi dengan benar.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Merender Konten

Di dalam elemen, Anda dapat menetapkan this.innerHTML atau menggunakan metode DOM untuk membuat konten. Pola yang umum adalah merender saat elemen terhubung ke halaman.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Menggunakan Elemen dalam HTML

Setelah didaftarkan, gunakan tag Anda seperti elemen bawaan lainnya. Anda dapat menempatkannya langsung dalam markup atau membuatnya dengan document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Aturan Konstruktor

Konstruktor berjalan saat sebuah instans dibuat. Ada beberapa aturan ketat:

Panggil super() terlebih dahulu.
Jangan memeriksa atau menambahkan atribut/anak di sini.
Tunda pekerjaan DOM hingga connectedCallback.

Gunakan konstruktor hanya untuk keadaan awal dan penyiapan pemantau peristiwa.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Menambahkan Perilaku

Karena elemen Anda merupakan simpul DOM nyata, Anda dapat memasang pendengar peristiwa dan memperbarui kontennya sebagai respons terhadap interaksi.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Persyaratan Tanda Hubung

Nama elemen khusus harus menyertakan tanda hubung. Ini menjamin bahwa nama tersebut tidak akan bertabrakan dengan elemen HTML bawaan saat ini maupun yang akan datang.

my-widget valid.
mywidget tidak valid dan menghasilkan kesalahan.
Nama tidak peka terhadap huruf besar-kecil, tetapi ditulis dengan huruf kecil.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined dan get

Dua metode registri yang berguna:

customElements.get(name) mengembalikan konstruktor, atau undefined jika belum terdaftar.
customElements.whenDefined(name) mengembalikan janji yang terpenuhi setelah elemen tersebut ditentukan.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Mendefinisikan Hanya Sekali

Setiap nama hanya dapat didaftarkan sekali. Memanggil define dengan nama yang sudah digunakan akan menghasilkan kesalahan. Cegah pendaftaran ganda dalam modul bersama.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Mengapa Elemen Khusus Penting

Elemen khusus menyediakan antarmuka pengguna yang tidak bergantung pada kerangka kerja, terenkapsulasi, dan dapat digunakan kembali. Elemen khusus:

Menyeragamkan penggunaan kembali komponen di berbagai tumpukan teknologi.
Terintegrasi dengan siklus hidup bawaan peramban.
Berpadu secara alami dengan DOM bayangan dan templat (yang akan dibahas nanti).

Pemeriksaan Singkat

Uji pemahaman Anda tentang pendefinisian elemen khusus.

Rangkuman

Anda telah mempelajari cara mendefinisikan elemen khusus:

customElements.define(name, class) mendaftarkan sebuah tag.
Kelas tersebut extends HTMLElement dan memanggil super() terlebih dahulu.
Nama harus menyertakan tanda hubung.
Lakukan render konten di connectedCallback, bukan di konstruktor.
get dan whenDefined membantu Anda memeriksa status pendaftaran.

Selanjutnya, kita akan menjelajahi seluruh siklus hidup elemen khusus.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mendefinisikan Elemen Khusus” gratis?

Ya — teks lengkap “Mendefinisikan Elemen Khusus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mendefinisikan Elemen Khusus”?

Daftarkan elemen dengan API customElements. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mendefinisikan Elemen Khusus” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy