Belajar Membuat Custom Element dan Shadow DOM Dasar di JavaScript

Pelajari cara membuat custom element dan menggunakan Shadow DOM di JavaScript dengan panduan dasar untuk meningkatkan pengalaman pengembangan web Anda.

Belajar Membuat Custom Element dan Shadow DOM Dasar di JavaScript

Jika Anda bekerja di dunia pengembangan web, Anda mungkin sudah mendengar tentang Custom Elements dan Shadow DOM. Kedua konsep ini menjadi bagian dari spesifikasi Web Components yang memungkinkan Anda untuk membuat elemen kustom yang dapat digunakan ulang di halaman web. Dalam artikel ini, kita akan belajar bagaimana cara membuat custom element dan menggunakan Shadow DOM di JavaScript.

Apa Itu Custom Element dan Shadow DOM?

Sebelum kita masuk ke cara pembuatan, mari kita pahami dulu apa itu Custom Element dan Shadow DOM:

• Custom Element adalah elemen HTML yang Anda buat sendiri dengan tag kustom. Anda bisa mendefinisikan perilaku dan gaya elemen tersebut sesuai kebutuhan Anda.
• Shadow DOM adalah cara untuk mengisolasi bagian dari DOM (Document Object Model) sehingga gaya dan skrip yang ada di dalamnya tidak terpengaruh oleh halaman induk. Ini berguna untuk menjaga agar elemen-elemen tersebut memiliki gaya dan struktur sendiri tanpa terpengaruh elemen lain di halaman.

Langkah-Langkah Membuat Custom Element

Untuk mulai membuat custom element, kita perlu mendefinisikan sebuah kelas JavaScript yang mewarisi dari HTMLElement. Kelas ini akan menentukan bagaimana elemen kita akan berperilaku.

1. Membuat Kelas untuk Custom Element:Kita mulai dengan membuat kelas untuk custom element kita. Misalnya, kita akan membuat elemen <my-greeting> yang menampilkan pesan sapaan.javascriptSalin kodeclass MyGreeting extends HTMLElement { constructor() { super(); // Panggil konstruktor superclass this.attachShadow({mode: 'open'}); // Menambahkan Shadow DOM } connectedCallback() { // Mengisi konten HTML ketika elemen di-render di halaman this.shadowRoot.innerHTML = ` <style> h1 { color: blue; } </style> <h1>Hello, Welcome to Web Components!</h1> `; } } // Mendaftarkan custom element customElements.define('my-greeting', MyGreeting); Dalam kode di atas, kita mendefinisikan kelas MyGreeting yang mewarisi HTMLElement. Di dalam konstruktor, kita menambahkan Shadow DOM dengan this.attachShadow({mode: 'open'}), yang memungkinkan kita untuk mengisolasi elemen ini dari gaya global.
2. Menggunakan Custom Element:Setelah mendaftarkan elemen dengan customElements.define, kita bisa menggunakan elemen kustom kita di HTML seperti elemen standar.htmlSalin kode<my-greeting></my-greeting> Dengan cara ini, kita telah berhasil membuat dan menggunakan custom element di halaman kita!

Menambahkan Shadow DOM untuk Isolasi Gaya

Seperti yang telah disebutkan sebelumnya, Shadow DOM memungkinkan kita untuk mengisolasi gaya dan struktur dari elemen-elemen lain di halaman. Dengan menambahkan Shadow DOM pada custom element, kita dapat menghindari konflik antara gaya global dan elemen kita.

Pada contoh di atas, kita sudah menambahkan Shadow DOM dengan this.attachShadow({mode: 'open'}). Mode open memungkinkan kita untuk mengakses Shadow DOM melalui JavaScript. Jika Anda ingin elemen tersebut tidak dapat diakses, Anda bisa menggunakan mode: 'closed'.

Penggunaan Gaya di Shadow DOM

Salah satu keuntungan besar dari Shadow DOM adalah kemampuannya untuk memiliki gaya terisolasi. Gaya yang Anda tentukan di dalam Shadow DOM hanya akan berlaku untuk elemen di dalamnya, tanpa mempengaruhi gaya elemen lain di halaman.

Pada contoh di atas, kita sudah menambahkan gaya untuk <h1> di dalam Shadow DOM:

htmlSalin kode<style>
    h1 {
        color: blue;
    }
</style>

Gaya ini hanya berlaku pada elemen <h1> di dalam shadow DOM dan tidak akan mempengaruhi elemen lain di halaman.

Menggunakan Shadow DOM dengan Template

Selain langsung mengisi konten dengan innerHTML, Anda juga bisa menggunakan elemen <template> untuk membuat struktur HTML yang lebih bersih dan terstruktur. Berikut adalah contoh penggunaannya:

htmlSalin kode<template id="greeting-template">
    <style>
        h1 {
            color: red;
        }
    </style>
    <h1>Goodbye, see you soon!</h1>
</template>

<script>
    class MyGreeting extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: 'open'});
            const template = document.getElementById('greeting-template');
            this.shadowRoot.appendChild(template.content.cloneNode(true));
        }
    }

    customElements.define('my-greeting', MyGreeting);
</script>

Dengan menggunakan template, kita memisahkan markup dan gaya dari skrip, sehingga lebih mudah untuk memelihara kode.

Kesimpulan

Dengan memahami cara membuat custom element dan menggunakan Shadow DOM di JavaScript, Anda dapat menciptakan elemen web yang lebih modular dan dapat digunakan kembali di berbagai proyek. Konsep-konsep ini sangat berguna dalam pengembangan aplikasi web modern, terutama ketika Anda ingin mengisolasi gaya atau perilaku elemen agar tidak saling bertabrakan. Cobalah untuk bereksperimen dan membuat elemen kustom yang sesuai dengan kebutuhan aplikasi Anda!