HTML5Tingkat: Lanjutan7 min
Web Components: Custom Elements & Shadow DOM
Bangun komponen antarmuka yang mandiri dan terenkapsulasi penuh tanpa dependensi framework menggunakan Custom Elements, Shadow DOM, dan <template>.
Pilar Web Components Native
Pratinjau TerbukaWeb Components adalah sekumpulan teknologi standar W3C yang memungkinkan pembuatan tag HTML kustom reusable yang terisolasi dari styling global halaman luar.
Poin Penting:
Custom Elements: API untuk mendaftarkan tag HTML kustom (contoh: ).
Shadow DOM: Enkapsulasi pohon DOM dan styling CSS privat agar tidak bocor keluar.
HTML Templates ( & ): Cetak biru markup yang tidak dirender hingga diinstansiasi.
Contoh Kode Sintaks
class UserBadge extends HTMLElement {
constructor() {
super();
// Mengaktifkan Shadow DOM terisolasi
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
.badge { background: #d97757; color: white; padding: 4px 8px; border-radius: 4px; font-family: sans-serif; font-size: 11px; }
</style>
<span class="badge"><slot>PENGGUNA STANDAR</slot></span>
`;
}
}
customElements.define('user-badge', UserBadge);Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi