Apa Itu Shadow DOM? Mengenal Serta Penjelasan Lengkapnya !

Daftar Isi [Tampil]

Apa Itu Shadow DOM? Mengenal Serta Penjelasan Lengkapnya!

Shadow DOM bisa menutup beberapa susunan DOM dalam elemen hingga tidak bisa disentuh di luar elemen atau nodenya. Secara singkat kita dapat sebutkan Shadow DOM sebagai "DOM dalam DOM".

Bagaimana dia bekerja? Lihat contoh berikut ini:

Shadow DOM bisa membuat DOM Tree lain tercipta secara terisolasi lewat host yang disebut elemen dari reguler DOM Tree (Dokumen Tree). Shadow DOM Tree ini diawali dari root bayang-bayang (Shadow root), yang dibawahnya bisa banyak memiliki element kembali seperti Dokumen Tree.

Ada banyak terminologi yang penting kita kenali dari contoh di atas:

Shadow host : Merupakan komponen/node yang terdapat pada regular DOM di mana shadow DOM terlampir pada komponen/node ini.
Shadow tree : DOM Tree di dalam shadow DOM.
Shadow boundary : Batas dari shadow DOM dengan regular DOM.
Shadow root : Root node dari shadow tree.

Kita bisa merekayasa komponen yang ada dalam shadow tree seperti pada dokumen tree, tetapi lingkupnya sepanjang kita ada dalam shadow boundary. Dalam kata lain, bila kita ada di dokumen tree kita tidak bisa merekayasa komponen bahkan juga mengaplikasikan styling pada komponen yang ada dalam shadow tree. Itu kenapa shadow DOM bisa membuat elemen terenkapsulasi

Untuk melampirkan Shadow DOM pada elemen penggunaan sangat mudah, yaitu dengan menggunakan properti attachShadow pada elemen-nya seperti ini:

main.js


// Shadow Host

const divElement = document.createElement("div");

 

 

// element yang berada di dalam Shadow DOM

const headingElement = document.createElement("h1");

headingElement.innerText = "Ini merupakan konten di dalam shadow DOM";

 

 

// Melampirkan shadow root pada shadow host

// Mengatur mode shadow dengan nilai open

const shadowRoot = divElement.attachShadow({mode: "open"});

 

 

// Memasukkan element heading ke dalam shadow root

shadowRoot.appendChild(headingElement);

 

 

// Memasukkan elemen shadow host ke regular DOM

document.body.appendChild(divElement);

index.html


<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>Shadow DOM Basic Usage</title>

 </head>

 <body>

 <script src="main.js"></script>

 </body>

</html>

Jika kita lihat pada browser, maka struktur HTML yang akan dihasilkan adalah seperti ini:

Dan struktur DOM tree yang terbentuk akan tampak seperti ini:

Dalam penggunaan attachShadow() kita melampirkan objek dengan properti mode yang memiliki nilai ‘open’. Sebenarnya terdapat dua opsi nilai yang dapat digunakan dalam properti mode, yaitu “open” dan “closed”.

Menggunakan nilai open berarti kita memperbolehkan untuk mengakses properti shadowRoot melalui elemen yang melampirkan Shadow DOM.


divElement.attachShadow;

properti shadowRoot mengembalikan struktur DOM yang berada pada shadow tree.

Namun jika kita menggunakan nilai closed maka properti shadowRoot akan mengembalikan nilai null.


const shadowRoot = divElement.attachShadow({mode: "closed"});

divElement.shadowRoot // null;

Hal ini berarti kita sama sekali tidak dapat mengakses Shadow Tree selain melalui variabel yang kita definisikan ketika melampirkan Shadow DOM.


const shadowRoot = divElement.attachShadow({mode: "closed"});

divElement.shadowRoot // null;

shadowRoot // # shadow-root (closed)

Karena Shadow DOM terisolasi dari document tree maka element yang terdapat di dalamnya pun tidak akan terpengaruh oleh styling yang berada diluar dari shadow root-nya.

index.html


<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>Shadow DOM Basic Usage</title>

   <style>

       h1 {

         color: red;

       }

   </style>

 </head>

 <body>

   <h1>Ini merupakan konten yang berada di Document tree</h1>

   <script src="main.js"></script>

 </body>

</html>

main.js


// Shadow Host

const divElement = document.createElement("div");

 

 

// element yang berada di dalam Shadow DOM

const headingElement = document.createElement("h1");

headingElement.innerText = "Ini merupakan konten di dalam shadow DOM";

 

 

// Melampirkan shadow root pada shadow host

// Mengatur mode shadow dengan nilai open

const shadowRoot = divElement.attachShadow({mode: "open"});

 

 

// Memasukkan element heading ke dalam shadow root

shadowRoot.appendChild(headingElement);

 

 

// Memasukkan elemen shadow host ke regular DOM

document.body.appendChild(divElement);

Jika dilihat pada browser maka hasilnya akan seperti ini:

Berdasarkan hasil di atas, styling hanya akan diterapkan pada elemen <h1> yang berada di document tree. Sedangkan elemen <h1> yang berada pada shadow dom tidak akan terpengaruh dengan styling tersebut. Lantas, bagaimana caranya kita melakukan styling pada Shadow DOM?

Kita dapat melakukannya dengan menambahkan template <style> di dalam shadowRoot.innerHTML. Contohnya seperti ini:


// menetapkan styling pada Shadow DOM

shadowRoot.innerHTML += `

 <style>

   h1 {

     color: green;

   }

 </style>

`;

Maka element <style> tersebut akan berada di dalam shadow tree dan akan berdampak pada elemen yang ada di dalamnya.

Sekian pembahasan mengenai Apa Itu Shadow DOM. Semoga bermafaat.

Donasi

KIRIM HADIAH PAYPAL Anda dapat memberikan kami hadiah dengan Paypal yang akan kami gunakan untuk memperpanjang domain blog ini, agar terus dapat aktif berbagi ilmu.

Apa Itu Shadow DOM? Mengenal Serta Penjelasan Lengkapnya !

Apa Itu Shadow DOM? Mengenal Serta Penjelasan Lengkapnya!

Related Posts

Iklan Atas Artikel

Iklan Bawah Artikel