Apa itu Shadow DOM?

Artikel ini menerangkan apa itu Shadow DOM.

YouTube Video

Memahami Shadow DOM

Shadow DOM adalah ciri yang kuat dalam piawaian Komponen Web yang membolehkan pengkapsulan gaya dan struktur DOM dalam komponen. Ciri ini menghalang gangguan gaya dan skrip antara komponen dan dokumen utama.

Apa itu Shadow DOM?

Shadow DOM menyediakan cara untuk mencipta pokok DOM yang terhad yang dikaitkan dengan elemen DOM biasa. Pokok bayangan ini diasingkan daripada dokumen keseluruhan, di mana gaya dan skrip luaran tidak mempengaruhinya, dan gaya serta skrip dalaman tidak tersebar keluar.

Sebagai contoh, jika anda mencipta komponen butang tersuai menggunakan Shadow DOM, gayanya tidak akan mengganggu elemen lain di halaman itu. Begitu juga, elemen dengan nama kelas yang sama tidak akan bertembung.

Manfaat Shadow DOM

1. Pengkapsulan: Shadow DOM memisahkan gaya dan fungsi, menghalang konflik dengan gaya dan skrip global.

2. Kebolehgunaan Semula: Komponen yang dibina dengan Shadow DOM boleh digunakan semula dalam projek yang berbeza tanpa kebimbangan tentang konflik gaya.

3. Kebolehselenggaraan: Pengkapsulan membolehkan komponen berdiri sendiri dari segi logik dan gaya, menjadikan penyelesaian masalah dan penyelenggaraan lebih mudah.

Membuat Shadow DOM

Untuk menggunakan Shadow DOM, anda perlu melampirkan akar bayangan kepada elemen HTML. Berikut adalah contoh mudah:.

 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. Elemen Hos: Elemen DOM biasa yang mana akar bayangan dilampirkan (dalam kes ini #shadow-host).

2. Akar Bayangan: Akar pokok bayangan yang dicipta menggunakan attachShadow.

3. Mode: Dalam mod open, JavaScript luaran boleh mengakses akar bayangan melalui element.shadowRoot. Sebaliknya, mod closed tidak membenarkan akses.

Penggayaan dalam Shadow DOM

Shadow DOM mempunyai skop gaya tersendiri. Gaya yang ditentukan dalam shadow tree hanya terpakai pada elemen dalam pokok 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`;

Walaupun terdapat gaya yang bertentangan dalam dokumen utama, perenggan di dalam shadow tree tetap tidak terjejas:

 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>

Perenggan dalam Shadow DOM kekal hijau, manakala perenggan luaran adalah merah.

Acara dalam Shadow DOM

Acara dalam Shadow DOM adalah serupa dengan acara DOM biasa tetapi mungkin berkelakuan berbeza dari segi penyebaran kerana enkapsulasi. Acara yang berlaku dalam shadow tree boleh naik ke elemen hos tetapi tidak terus 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});

Apabila butang ditekan, kedua-dua pendengar diaktifkan, menunjukkan tingkah laku gelembung acara.

Slot: Pengagihan kandungan Light DOM

Slot membolehkan anda memproyeksikan kandungan 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 boleh lakukan seperti berikut:

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

Elemen slot dalam Shadow DOM memaparkan kandungan Light DOM dengan atribut slot yang sepadan.

Kesimpulan

Shadow DOM adalah alat penting untuk membina komponen web yang kukuh, boleh digunakan semula, dan mudah diselenggara. Dengan mengenkapsulasi gaya dan fungsi, ia mengurangkan potensi konflik dan mempermudah pengurusan kod asas.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video