Shadow DOM - Apa Itu Shadow DOM?

pada tanggal

Shadow DOM - Apa Itu Shadow DOM?

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:

2020031020401056fdb6ae992399a36fcbfa50e75cf4ee.png
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:

  1. // Shadow Host

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

  3.  

  4.  

  5. // element yang berada di dalam Shadow DOM

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

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

  8.  

  9.  

  10. // Melampirkan shadow root pada shadow host

  11. // Mengatur mode shadow dengan nilai open

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

  13.  

  14.  

  15. // Memasukkan element heading ke dalam shadow root

  16. shadowRoot.appendChild(headingElement);

  17.  

  18.  

  19. // Memasukkan elemen shadow host ke regular DOM

  20. document.body.appendChild(divElement);



  1. <!DOCTYPE html>

  2. <html>

  3.  <head>

  4.    <meta charset="utf-8">

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

  6.    <title>Shadow DOM Basic Usage</title>

  7.  </head>

  8.  <body>

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

  10.  </body>

  11. </html>


Jika kita melihat pada browser, struktur HTML yang dihasilkan akan terlihat seperti ini:
2020031020442138d22cf8f4814aacc795f563c3015892.png
Dan struktur DOM tree yang dihasilkan akan berbentuk seperti ini:
20200310204452a9e4788ac5f7f206c20debfa0bc87524.png
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. 

  1. divElement.attachShadow;


properti shadowRoot mengembalikan struktur DOM yang berada pada shadow tree.
20200310204643a7a1f999761eaf74f9476e50013bb373.gif
Namun jika kita menggunakan nilai closed maka properti shadowRoot akan mengembalikan nilai null. 

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

  2. 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.

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

  2. divElement.shadowRoot // null;

  3. shadowRoot // # shadow-root (closed)


2020031020483296ef7fce493fd7c0528697c3fa03565b.gif
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.

  1. <!DOCTYPE html>

  2. <html>

  3.  <head>

  4.    <meta charset="utf-8">

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

  6.    <title>Shadow DOM Basic Usage</title>

  7.    <style>

  8.        h1 {

  9.          color: red;

  10.        }

  11.    </style>

  12.  </head>

  13.  <body>

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

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

  16.  </body>

  17. </html>



  1. // Shadow Host

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

  3.  

  4.  

  5. // element yang berada di dalam Shadow DOM

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

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

  8.  

  9.  

  10. // Melampirkan shadow root pada shadow host

  11. // Mengatur mode shadow dengan nilai open

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

  13.  

  14.  

  15. // Memasukkan element heading ke dalam shadow root

  16. shadowRoot.appendChild(headingElement);

  17.  

  18.  

  19. // Memasukkan elemen shadow host ke regular DOM

  20. document.body.appendChild(divElement);



Jika kita lihat pada browser maka hasilnya akan seperti berikut ini:

20200310205023649403bfa8d61e879afc65f4a050c502.png
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:

  1. // menetapkan styling pada Shadow DOM

  2. shadowRoot.innerHTML += `

  3.  <style>

  4.    h1 {

  5.      color: green;

  6.    }

  7.  </style>

  8. `;


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

Lokasi: Indonesia

Komentar

Posting Komentar