Komponen web adalah sekumpulan API platform web yang memungkinkan Anda membuat elemen HTML yang dienkapsulasi dan dapat digunakan kembali. Komponen ini bekerja dengan lancar di semua browser modern dan dapat digunakan dengan pustaka atau framework JavaScript apa pun. Tutorial langkah demi langkah ini akan memandu Anda dalam membuat komponen web pertama Anda menggunakan JavaScript vanilla.
Langkah 1: Pelajari Dasar-dasarnya
Sebelum Anda mulai membuat kode, mari kita kenali tiga teknologi utama yang ada di balik komponen web:
- Elemen Khusus: Menetapkan elemen HTML baru
- Bayangan DOM: Membuat struktur internal dan gaya komponen yang dienkapsulasi.
- Template HTML: Menetapkan struktur HTML yang dapat digunakan kembali yang tidak dirender hingga digunakan.
 |
| sumber: linkedin.com |
Langkah 2: Siapkan Proyek Anda
Folder baru untuk proyek Anda dan indeks menambahkan file html dan file component.js. Indeks.html akan menjadi seperti halaman arahan, halaman utama, dan komponen. Semua desain akan dijelaskan di dalam file component/content.js.
Struktur File:
/your-project-folder
|-- index.html
|-- component.js
Langkah 3: Menulis HTML BoilerPlate
di index. Yang perlu Anda lakukan di sini adalah membuat file HTML, misalnya single-page.html dan menambahkan struktur HTML awal dan menautkan file JS ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Component</title>
</head>
<body>
<my-greeting></my-greeting>
<script src="component.js"></script>
</body>
</html>
Langkah 4: Mendefinisikan Komponen Web
Di dalam komponen.js dan saya akan mendefinisikan komponen web sederhana:
class MyGreeting extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const wrapper = document.createElement('div');
wrapper.textContent = 'Hello, World! This is my first web component.';
shadow.appendChild(wrapper);
}
}
customElements.define('my-greeting', MyGreeting);
Kode ini membuat elemen baru <salamku> yang menampilkan pesan salam. Shadow DOM memastikan gaya dan struktur komponen dienkapsulasi.
Langkah 5: Menambahkan Penataan
Anda dapat menata komponen dengan menambahkan tag di DOM Bayangan:
const style = document.createElement('style');
style.textContent = `
div {
color: blue;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000;
border-radius: 5px;
text-align: center;
}
`;
shadow.appendChild(style);
Penggunaan enkapsulasi DOM bayangan berarti bahwa gaya ini hanya berlaku untuk komponen tersebut.
Langkah 6: Tingkatkan Komponen dengan Atribut
Perhatikan atribut untuk membuat komponen Anda dinamis:
static get observedAttributes() { return ['message']; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'message') {
this.shadowRoot.querySelector('div').textContent = newValue;
}
}
Sekarang, Anda dapat menggunakan komponen sebagai berikut:
<my-greeting message="Welcome to my website!"></my-greeting>
Langkah 7: Menguji Komponen Web Anda
Buka index.html di browser Anda. Anda akan dapat melihat pesan ucapan yang telah disesuaikan. Dengan melakukan itu, Anda akan menulis atribut pesan baru di dalam HTML untuk memaksa tampilan diperbarui secara dinamis.
Langkah 8: Langkah Berikutnya
Anda telah membuat komponen web dasar; sekarang lihat beberapa fitur komponen web tingkat lanjut:
- Bagaimana event ditangani di dalam komponen web.
- Mendistribusikan konten melalui slot.
- Membangun pohon komponen yang lebih kompleks.
Kesimpulan
Selamat! Anda telah berhasil membuat komponen web pertama Anda. Dengan memahami elemen kustom, Shadow DOM, dan templat HTML, Anda dapat membuat komponen yang dienkapsulasi dan dapat digunakan kembali untuk aplikasi web modern. Bereksperimenlah dengan berbagai fitur untuk membuat komponen web yang lebih kompleks dan interaktif.
Kembali ke>>> Panduan untuk Komponen Web: Membuat Elemen UI yang Dapat Digunakan Kembali