Apa Itu Shadow DOM?

Shadow DOM bisa mengisolasi sebagian struktur DOM di dalam komponen sehingga tidak bisa disentuh dari luar komponen atau nodenya. Ringkasnya kita dapat sebut shadow DOM sebagai “DOM dalam DOM”.

Shadow DOM bisa membuat DOM Tree lain terbentuk secara terisolasi melalui host yang merupakan komponen dari regular DOM Tree (Document Tree). Shadow DOM Tree ini dimulai dari root bayangan (Shadow root), yang dibawahnya bisa mempunyai banyak element lagi pantasnya Document Tree.

Terdapat sejumlah terminologi yang harus kita ketahui dari ilustrasi di atas:

- Shadow host : Merupakan komponen/node yang terdapat di 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 memanipulasi elemen yang ada di dalam shadow tree pantasnya pada document tree, tetapi cakupannya selama kita berada di dalam shadow boundary. Dengan kata lain, bila kita berada di document tree kita tidak bisa memanipulasi elemen bahkan menerapkan styling pada elemen yang ada di dalam shadow tree. Itulah kenapa shadow DOM bisa membuat komponen terenkapsulasi

Untuk melampirkan shadow DOM pada elemen pemakaian sangat gampang, yakni dengan memakai properti attachShadow pada elemen-nya semacam ini:

- main.js

Baca Juga: HTML Pertamaku

1. // Shadow Host

1. const divElement = document.createElement(“div”);

1. // element yang ada di dalam Shadow DOM

1. const headingElement = document.createElement(“h1”);

1. headingElement.innerText = “Ini adalah konten di dalam shadow DOM”;

1. // Melampirkan shadow root pada shadow host

1. // Mengatur mode shadow dengan nilai open

1. const shadowRoot = divElement.attachShadow({mode: “open”});

1. // Memasukkan element heading ke dalam shadow root

1. shadowRoot.appendChild(headingElement);

1. // Memasukkan elemen shadow host ke regular DOM
2. document.body.appendChild(divElement);

index.html

1. <!DOCTYPE html>

1. <html>

1. <head>

1. <meta charset=“utf-8”>

1. <meta name=“viewport” content=“width=device-width”>

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

1. </head>

1. <body>

1. <script src=“main.js”></script>

1. 1. </body>
2. </html>

Bila kita lihat pada browser, maka struktur HTML yang akan dihasilkan ialah semacam ini:

Dan struktur DOM tree yang terbentuk akan terlihat semacam ini:

Dalam pemakaian attachShadow() kita melampirkan objek dengan properti mode yang mempunyai nilai ‘open’. Sebetulnya terdapat dua pilihan nilai yang bisa dipakai dalam properti mode, yaitu “open” dan “closed”.

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

divElement.attachShadow;

properti shadow root mengembalikan struktur DOM yang berada di shadow tree.

Tetapi bila kita memakai nilai closed maka properti shadowRoot akan mengembalikan nilai null.

1. const shadowRoot = divElement.attachShadow({mode: “closed”});
2. divElement.shadowRoot // null;

Hal ini artinya kita betul-betul tidak bisa mengakses shadow tree selain melalui variabel yang kita definisikan saat melampirkan shadow DOM.

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

1. divElement.shadowRoot // null;
2. shadowRoot // # shadow-root (closed)

Sebab shadow DOM terisolasi dari document tree maka element yang ada di dalamnya pun tak akan terpengaruh oleh styling yang berada diluar dari shadow root-nya.

- index.html

1. <!DOCTYPE html>

1. <html>

1. <head>

1. <meta charset=“utf-8”>

1. <meta name=“viewport” content=“width=device-width”>

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

1. <style>

1. h1 {

1. color: red;

1. }

1. </style>

1. </head>

1. <body>

1. <h1>Ini adalah konten yang ada di Document tree</h1>

1. <script src=“main.js”></script>

1. 1. </body>
1. </html>

main.js

1. // Shadow Host

1. const divElement = document.createElement(“div”);

1. // element yang ada di dalam Shadow DOM

1. const headingElement = document.createElement(“h1”);

1. headingElement.innerText = “Ini adalah konten di dalam shadow DOM”;

1. // Melampirkan shadow root pada shadow host

1. // Mengatur mode shadow dengan nilai open

1. const shadowRoot = divElement.attachShadow({mode: “open”});

1. // Memasukkan element heading ke dalam shadow root

1. shadowRoot.appendChild(headingElement);

1. // Memasukkan elemen shadow host ke regular DOM
2. document.body.appendChild(divElement);

Bila dilihat pada browser maka hasilnya akan semacam ini:

Berdasarkan hasil di atas, styling cuma akan diimplementasikan pada elemen <h1> yang ada di document tree. Sedangkan elemen <h1> yang berada di shadow DOM tak akan terpengaruh dengan styling itu. Lantas, bagaimana caranya kita melakukan styling pada shadow DOM?

Kita bisa melakukannya dengan menambahkan template <style> di dalam shadowRoot.innerHTML. Misalnya semacam ini: