Shadow DOM - Apa Itu Shadow DOM? - Information And Technology

Shadow DOM dapat mengisolasi sebagian struktur DOM di dalam komponen sehingga tidak dapat disentuh dari luar komponen atau nodenya. Singkatnya kita bisa sebut Shadow DOM sebagai “DOM dalam DOM”. Bagaimana ia bekerja? Perhatikan ilustrasi berikut:

Shadow DOM memungkinkan Anda untuk memisahkan host, yang merupakan komponen dari tree DOM normal (tree dokumen), untuk membentuk tree DOM lain. tree DOM bayangan dimulai dari akar bayangan (root shadow) dan di bawahnya dapat berisi banyak elemen lain seperti pohon dokumen.

Terdapat beberapa terminologi yang perlu kita ketahui dari ilustrasi 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 dapat memanipulasi elemen-elemen yang terdapat dalam tree shadow seperti pada tree dokumen, tetapi tercakup selama kita tetap berada di dalam batas shadow. Dengan kata lain, jika kita berada di tree dokumen, kita tidak dapat memanipulasi elemen, bahkan menerapkan gaya ke elemen yang terdapat di tree shadow. Inilah sebabnya mengapa Shadow DOM dapat membuat komponen yang dibungkus

Sangat mudah untuk melampirkan Shadow DOM ke elemen menggunakan properti AttachShadow elemen sebagai berikut:

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 melihat pada browser, struktur HTML yang dihasilkan akan terlihat seperti ini:

Dan struktur DOM tree yang dihasilkan akan berbentuk seperti ini:

Menggunakan attachShadow(), kita melampirkan objek dengan properti mode dengan nilai ‘open’. Sebenarnya ada dua opsi nilai yang dapat digunakan dalam atribut mode, yaitu “open” dan “closed”.

Menggunakan nilai open berarti kita mengizinkan akses ke properti shadowRoot melalui elemen yang dilampirkan di 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 mengartikan bahwa kita sama sekali tidak dapat mengakses Shadow Tree selain dengan variabel yang kita definisikan ketika melampirkan Shadow DOM.


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

divElement.shadowRoot // null;

shadowRoot // # shadow-root (closed)

Dikarenakan Shadow DOM terisolasi dari document tree maka element yang ada di dalamnya pun tidak akan terpengaruh oleh styling yang terdapat 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 kita lihat pada browser maka hasilnya akan seperti berikut ini:

Berdasarkan hasil di atas, styling hanya akan diterapkan terhadap elemen <h1> yang terdapat di document tree. Sedangkan elemen <h1> yang terdapat pada shadow dom tidak akan terpengaruh oleh styling tersebut. jika demikian lantas, bagaimana caranya kita melakukan styling pada Shadow DOM?

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


// menetapkan styling pada Shadow DOM

shadowRoot.innerHTML += `

 <style>

   h1 {

     color: green;

   }

 </style>

`;

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

Kuyikale16

Blogger yang senang Berbagi Tips dan Trik menarik Seputar Teknologi.

Shadow DOM - Apa Itu Shadow DOM?

0 Response to "Shadow DOM - Apa Itu Shadow DOM?"

Posting Komentar