Apa itu Shadow DOM?

Artikel ini menjelaskan apa itu Shadow DOM.

YouTube Video

Memahami Shadow DOM

Shadow DOM adalah fitur kuat dari standar Web Components yang memungkinkan enkapsulasi gaya dan struktur DOM di dalam komponen. Fitur ini mencegah gangguan dari gaya dan skrip antara komponen dan dokumen utama.

Apa itu Shadow DOM?

Shadow DOM menyediakan cara untuk membuat pohon DOM yang dibatasi terkait dengan elemen DOM biasa. Pohon bayangan ini terisolasi dari keseluruhan dokumen, di mana gaya dan skrip eksternal tidak mempengaruhinya, serta gaya dan skrip internalnya tidak bocor keluar.

Sebagai contoh, jika Anda membuat komponen tombol kustom menggunakan Shadow DOM, gaya-gayanya tidak akan mengganggu elemen lain di halaman. Demikian pula, elemen dengan nama kelas yang sama tidak akan konflik.

Manfaat Shadow DOM

1. Enkapsulasi: Shadow DOM memisahkan gaya dan fungsionalitas, mencegah konflik dengan gaya dan skrip global.

2. Penggunaan Ulang: Komponen yang dibangun dengan Shadow DOM dapat digunakan kembali di berbagai proyek tanpa harus khawatir tentang konflik gaya.

3. Kemudahan Pemeliharaan: Enkapsulasi memungkinkan komponen dapat berdiri sendiri dalam hal logika dan gaya, sehingga memudahkan proses debugging dan pemeliharaan.

Membuat Shadow DOM

Untuk menggunakan Shadow DOM, Anda perlu melampirkan shadow root ke elemen HTML. Berikut contoh sederhana:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Penjelasan

1. Host Element: Elemen DOM biasa tempat shadow root dilampirkan (dalam hal ini #shadow-host).

2. Shadow Root: Akar dari pohon bayangan yang dibuat menggunakan attachShadow.

3. Mode: Dalam mode open, JavaScript eksternal dapat mengakses shadow root melalui element.shadowRoot. Di sisi lain, mode closed tidak mengizinkan akses.

Pemformatan dalam Shadow DOM

Shadow DOM memiliki lingkup gaya sendiri. Gaya yang ditentukan dalam pohon shadow hanya berlaku untuk elemen-elemen dalam pohon tersebut. Berikut adalah contohnya:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Bahkan jika ada gaya yang bertentangan dalam dokumen utama, paragraf di dalam pohon shadow tidak terpengaruh:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Paragraf di dalam Shadow DOM tetap hijau, sementara paragraf eksternal berwarna merah.

Event di dalam Shadow DOM

Event di dalam Shadow DOM mirip dengan event DOM biasa tetapi dapat berperilaku berbeda dalam hal propagasi karena enkapsulasi. Event yang terjadi di dalam pohon shadow dapat naik ke elemen host tetapi tidak langsung naik ke seluruh dokumen.

Berikut adalah contohnya:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Ketika tombol diklik, kedua listener terpicu, menunjukkan perilaku bubbling event.

Slot: Distribusi konten Light DOM

Slot memungkinkan Anda untuk memproyeksikan konten dari Light DOM ke dalam Shadow DOM. Berikut adalah contohnya:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

Dalam dokumen utama, Anda dapat melakukan sebagai berikut:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Elemen slot di dalam Shadow DOM menampilkan konten Light DOM dengan atribut slot yang sesuai.

Kesimpulan

Shadow DOM adalah alat penting untuk membangun komponen web yang kuat, dapat digunakan kembali, dan mudah dikelola. Dengan mengen kapsulasi gaya dan fungsionalitas, ini mengurangi potensi konflik dan menyederhanakan pengelolaan kode.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video