Shadow DOM: Cara Menggunakan, Kelebihan, dan Kekurangan

Shadow DOM merupakan fitur yang diperkenalkan dalam spesifikasi Web Components, memungkinkan pengembang untuk membuat DOM (Document Object Model) yang terpisah dari DOM utama.

Yuk, simak ulasan lengkapnya di sini.

Apa Itu Shadow DOM?

Shadow DOM adalah teknik dalam HTML yang memungkinkan elemen-elemen tertentu di dalam halaman web memiliki struktur DOM tersendiri yang disebut shadow tree, terpisah dari DOM utama. 

Bayangkan memiliki sebuah ruangan besar, dan kamu ingin membaginya menjadi beberapa area kecil dengan dekorasi dan fungsi yang berbeda tanpa memengaruhi keseluruhan ruangan. 

Nah, DOM bayangan juga bekerja dengan cara serupa: ia menyediakan area yang terisolasi dalam halaman web, di mana elemen-elemen di dalamnya dapat tetap konsisten, tidak terganggu, dan terpisah dari elemen-elemen lainnya di dalam DOM utama.

Dengan area shadow ini, pengembang web dapat mengelola gaya (CSS) dan perilaku (JavaScript) dari elemen-elemen tanpa khawatir mengenai potensi konflik dengan elemen lain di halaman. 

Misalnya, struktur terpisah dari DOM ini sering digunakan dalam pengembangan komponen UI yang kompleks, seperti tombol interaktif, formulir, atau elemen navigasi, terutama di framework populer seperti React dan Angular. 

Tentu saja, ini sangat membantu menjaga komponen tetap rapi dan terorganisir, karena semua yang ada di dalam shadow tree hanya berdampak pada area tersebut dan tidak berinteraksi dengan elemen luar.

Ketika browser membuka halaman web, ia membentuk struktur hierarki yang disebut DOM tree, yang menampilkan susunan elemen HTML seperti <header>, <footer>, <div>, dan sebagainya. 

Sementara itu, struktur terpisah ini menciptakan sub-pohon atau sub-tree yang bekerja seperti “ruang privat” bagi elemen-elemen di dalamnya. Teknik ini menjadi solusi ideal untuk membangun antarmuka yang modular dan berskala besar tanpa risiko konflik antar-elemen.

Cara Menggunakan Shadow DOM

Agar memudahkan pemahanmu mengenai cara kerja DOM terisolasi ini, berikut adalah langkah-langkah praktis untuk menerapkan DOM bayangan dalam JavaScript, beserta contohnya.

1. Membuat Area Bayangan

Langkah pertama adalah memilih elemen yang akan menjadi host bagi sub-pohon ini. Kemudian, tambahkan area terisolasi menggunakan metode attachShadow.

html

<header id="headerElement"></header>

<script>
  // Memilih elemen yang akan menjadi host dari Shadow DOM
  const headerElement = document.querySelector('#headerElement');

  // Menambahkan Shadow DOM ke elemen dengan mode 'open'
  const shadowRoot = headerElement.attachShadow({ mode: 'open' });
</script>

Pada contoh di atas, kita membuat shadow root dengan mode open, yang memungkinkan akses elemen melalui JavaScript eksternal. Ada pula mode closed yang membatasi akses dari JavaScript eksternal.

2. Menambahkan Konten ke Shadow DOM

Setelah membuat shadow root, kita bisa menambahkan elemen HTML dan CSS terpisah ke dalamnya. Misalnya, kita tambahkan elemen <h1> dengan gaya khusus yang hanya berlaku di area terisolasi ini.

html

<header id="headerElement"></header>

<script>
  const headerElement = document.querySelector('#headerElement');
  const shadowRoot = headerElement.attachShadow({ mode: 'open' });

  // Menambahkan elemen HTML ke dalam shadow root
  shadowRoot.innerHTML = `
    <style>
      h1 {
        color: royalblue;
        font-family: Arial, sans-serif;
      }
    </style>
    <h1>Ini adalah konten dalam Shadow DOM</h1>
  `;
</script>

Gaya yang diterapkan hanya akan berlaku untuk elemen di dalam DOM bayangan ini, memastikan isolasi di mana gaya tidak memengaruhi elemen HTML di luar shadow root.

3. Menambahkan Elemen Secara Dinamis

Kamu juga bisa menambahkan elemen secara dinamis ke dalam sub-pohon ini. Misalnya, kita ingin menambahkan paragraf <p> yang baru ke dalam area terpisah yang sudah dibuat sebelumnya.

javascript

const newParagraph = document.createElement('p');
newParagraph.textContent = 'Ini adalah paragraf dalam Shadow DOM yang ditambahkan secara dinamis.';

shadowRoot.appendChild(newParagraph);

Dengan kode di atas, paragraf baru ditambahkan ke dalam elemen headerElement. Karena terisolasi di dalam shadow root, paragraf tersebut tidak akan memengaruhi atau terpengaruh oleh elemen lain di halaman.

4. Mengakses Elemen di Dalam Shadow DOM

Kamu bisa mengakses elemen dalam sub-pohon ini dengan memilih shadow root dari elemen host, lalu memilih elemen di dalamnya. Contohnya, kita ingin mengakses elemen <h1> dalam shadow root:

javascript

const shadowHeader = headerElement.shadowRoot.querySelector('h1');
console.log(shadowHeader.textContent); // Output: "Ini adalah konten dalam Shadow DOM"

Dengan DOM bayangan yang diatur sebagai open, kita dapat mengakses elemen dalam shadow tree melalui headerElement.shadowRoot.

Contoh Lengkap Penggunaan Shadow DOM

Berikut contoh lengkap penerapan DOM bayangan yang meliputi semua langkah di atas.

html

<header id="headerElement"></header>

<script>
  // Langkah 1: Membuat shadow root di elemen header
  const headerElement = document.querySelector('#headerElement');
  const shadowRoot = headerElement.attachShadow({ mode: 'open' });

  // Langkah 2: Menambahkan konten HTML dan CSS di dalam shadow root
  shadowRoot.innerHTML = `
    <style>
      h1 {
        color: royalblue;
        font-family: Arial, sans-serif;
        text-align: center;
      }
      p {
        color: gray;
        font-style: italic;
        text-align: center;
      }
    </style>
    <h1>Ini adalah Header dalam Shadow DOM</h1>
  `;

  // Langkah 3: Menambahkan elemen baru secara dinamis
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'Ini adalah paragraf tambahan dalam Shadow DOM.';
  shadowRoot.appendChild(newParagraph);

  // Langkah 4: Mengakses elemen di dalam Shadow DOM
  const shadowHeader = shadowRoot.querySelector('h1');
  console.log(shadowHeader.textContent); // Output: "Ini adalah Header dalam Shadow DOM"
</script>

Kode ini menghasilkan elemen header dalam komponen bayangan yang berisi elemen <h1> dan paragraf <p> dengan gaya terpisah. Elemen-elemen tersebut terisolasi dari elemen DOM lainnya di halaman, sehingga menghindari konflik gaya atau struktur.

Kelebihan dan Kekurangan Shadow DOM

Berikut adalah kelebihan dan kekurangan dari menggunakan fitur ini:

Kelebihan Shadow DOM

• Isolasi Gaya: Dengan area bayangan ini, kamu bisa mencegah konflik gaya antara komponen. Ini berguna ketika komponen-komponen menggunakan kelas yang sama dengan gaya berbeda.
• Pengembangan Modular: Komponen bayangan mendukung pengembangan komponen secara modular, sehingga komponen dapat berfungsi sendiri tanpa tergantung elemen lain.
• Meningkatkan Pemeliharaan: Isolasi membuat pemeliharaan lebih mudah. Jika ada pembaruan yang diperlukan, kamu hanya perlu mengubah komponen tanpa khawatir memengaruhi elemen lain.

Kekurangan Shadow DOM

• Kompleksitas Implementasi: Bagi pengembang baru, area terisolasi ini bisa terasa kompleks. Pemahaman konsep DOM yang mendalam diperlukan untuk menguasainya.
• Dukungan Browser Terbatas: Meskipun browser modern mendukung komponen bayangan, beberapa browser lama mungkin tidak mendukungnya sepenuhnya. Ini bisa jadi pertimbangan untuk memastikan aksesibilitas di berbagai platform.

Kapan Harus Menggunakan Shadow DOM?

DOM bayangan berguna untuk komponen UI yang membutuhkan isolasi dan bisa digunakan kembali, seperti tombol, formulir, atau widget interaktif lainnya. Saat kamu ingin menghindari konflik gaya atau perilaku dengan elemen lain, area bayangan ini adalah pilihan ideal.

Baca Juga: Mengenal Virtual DOM: Apa Itu dan Bagaimana Cara Kerjanya?

Kesimpulan

Shadow DOM adalah alat yang esensial dalam pengembangan website modern, memungkinkan kamu untuk membuat komponen yang modular dan terisolasi. 

Baik kamu seorang pemula maupun pengembang berpengalaman, mempelajari DOM bayangan akan membantumu membangun antarmuka yang konsisten dan andal.

Jika kamu ingin membangun website yang stabil dan mudah dipelihara, kamu bisa mempertimbangkan layanan hosting cepat dan aman dari IDwebhost.

Dengan begitu, performa situs kamu tetap optimal, dan kamu bisa mengimplementasikan fitur seperti Shadow DOM dengan mudah.