Pengertian:
Web Components adalah seperangkat API platform web yang memungkinkan Anda membuat tag HTML khusus, dapat digunakan kembali, dan dienkapsulasi untuk digunakan di halaman web dan aplikasi web. Layaknya konsep plugin pada wordpress atau CMS serupa, component ini siap dipakai ulang pada halaman HTML manapun tanpa memerlukan library atau framework tambahan.
Teknologi ini dirancang untuk mengatasi tantangan pengelolaan kode HTML yang kompleks, membuat kode lebih modular, dan mempermudah pengembang dalam mengelola serta menggunakan kembali elemen-elemen di berbagai halaman atau aplikasi tanpa risiko konflik.
Web Components terdiri dari tiga teknologi utama:
Custom Elements
- Memungkinkan Anda membuat elemen HTML baru dengan nama khusus, seperti
<my-button> atau <user-card>. Elemen ini memiliki logika dan gaya tersendiri yang dapat diprogram menggunakan JavaScript.
- Anda dapat menggunakan API untuk mendefinisikan perilaku baru atau memperluas elemen bawaan HTML.
Shadow DOM
Memberikan kemampuan untuk membuat DOM terisolasi yang tidak terpengaruh oleh gaya atau skrip dari luar.
Dengan Shadow DOM, elemen memiliki gaya dan struktur independen sehingga aman dari konflik dengan CSS atau JavaScript lainnya.
Misalnya, jika sebuah komponen memiliki ID header, ID tersebut tidak akan bentrok dengan elemen lain di luar komponen tersebut.
HTML Templates
Memungkinkan Anda mendefinisikan template struktur HTML yang tidak akan dirender hingga diinisialisasi melalui JavaScript.
Template ini dapat digunakan untuk membuat elemen yang memiliki struktur dan gaya dasar yang konsisten.
Keunggulan Web Components:
Reusable (Dapat Digunakan Kembali): Komponen yang dibuat dapat dipakai di berbagai proyek atau halaman tanpa duplikasi kode.
Encapsulation (Terenkapsulasi): Logika dan gaya tidak bocor ke luar komponen, sehingga mencegah konflik antar elemen.
Framework-Agnostic: Tidak memerlukan library atau framework tambahan seperti React, Angular, atau Vue, sehingga dapat langsung berjalan di browser modern.
Contoh Implementasi Sederhana Web Component
Berikut adalah contoh pembuatan komponen custom menggunakan teknologi Web Components:
`` <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components Example</title>
</head>
<body>
<!-- Menggunakan Custom Element -->
<hello-world></hello-world>
<script>
// Membuat Custom Element
class HelloWorld extends HTMLElement {
constructor() {
super();
// Attach Shadow DOM untuk enkapsulasi
const shadow = this.attachShadow({ mode: 'open' });
// Template HTML komponen
const wrapper = document.createElement('div');
wrapper.textContent = 'Hello, Web Components!';
// Gaya komponen
const style = document.createElement('style');
style.textContent = `
div {
color: white;
background: blue;
padding: 10px;
border-radius: 5px;
font-family: Arial, sans-serif;
}
`;
// Menambahkan elemen ke Shadow DOM
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
// Mendefinisikan custom element
customElements.define('hello-world', HelloWorld);
</script>
</body>
</html>
``
Output:
Ketika Anda membuka file ini di browser, elemen <hello-world> akan muncul dengan teks "Hello, Web Components!", memiliki gaya khusus, dan terenkapsulasi sehingga tidak akan terpengaruh oleh CSS global lainnya.
Sumber:
- Code Politan
- MDN Web Docs
- webcomponents.org
