Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML / Javascript

Apa Itu Shadow DOM?

Oleh Rifyu PBN Posting Komentar
Shadow DOM bisa mengisolasi sebagian struktur DOM di dalam komponen sehingga tidak bisa dijamah dari luar komponen ataupun nodenya. Singkatnya kita dapat sebut Shadow DOM selaku“ DOM dalam DOM”. Gimana dia bekerja? Perhatikan ilustrasi berikut:

Shadow DOM bisa membuat DOM Tree lain tercipta secara terisolasi lewat host yang ialah komponen dari regular DOM Tree (Document Tree). Shadow DOM Tree ini diawali dari root bayangan (Shadow root), yang dibawahnya bisa mempunyai banyak element lagi seperti Document Tree.
Ada sebagian terminologi yang butuh kita tahu dari ilustrasi di atas:
  • Shadow host : Ialah komponen/ node yang ada pada regular DOM di mana shadow DOM terlampir pada komponen/ node ini.
  • Shadow tree : DOM Tree di dalam shadow DOM.
  • Shadow boundary : Batasan dari shadow DOM dengan regular DOM.
  • Shadow root : Root node dari shadow tree.
Kita bisa memanipulasi elemen yang ada di dalam shadow tree seperti pada document tree, tetapi cakupannya sepanjang kita terletak di dalam shadow boundary. Dengan kata lain, bila kita terletak di document tree kita tidak bisa memanipulasi elemen apalagi mempraktikkan styling pada elemen yang ada di dalam shadow tree. Seperti itu kenapa shadow DOM bisa membuat komponen terenkapsulasi.
Buat melampirkan Shadow DOM pada elemen pemakaian sangat gampang, ialah dengan memakai properti attachShadow pada elemen-nya semacam ini:

  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 lihat pada browser, maka struktur HTML yang akan dihasilkan adalah seperti ini:

2020031020442138d22cf8f4814aacc795f563c3015892.png
Serta struktur DOM tree yang tercipta hendak nampak semacam ini:
20200310204452a9e4788ac5f7f206c20debfa0bc87524.png
Dalam pemakaian attachShadow() kita melampirkan objek dengan properti mode yang mempunyai nilai ‘open’. Sesungguhnya ada 2 opsi nilai yang bisa digunakan dalam properti fashion, ialah “open” serta “closed”. 
Memakai nilai open berarti kita memperbolehkan buat mengakses properti shadowRoot lewat elemen yang melampirkan Shadow DOM. 

  1. divElement.attachShadow;


properti shadowRoot mengembalikan struktur DOM yang terletak pada shadow tree.
20200310204643a7a1f999761eaf74f9476e50013bb373.gif
Tetapi bila kita menggunakan nilai closed hingga properti shadowRoot hendak mengembalikan nilai null. 

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

  2. divElement.shadowRoot // null;


Perihal ini berarti kita sama sekali tidak bisa mengakses Shadow Tree tidak hanya lewat variabel yang kita definisikan kala melampirkan Shadow DOM.

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

  2. divElement.shadowRoot // null;

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


2020031020483296ef7fce493fd7c0528697c3fa03565b.gif
Sebab Shadow DOM terisolasi dari document tree hingga element yang ada di dalamnya juga tidak hendak terbawa- bawa oleh styling yang terletak 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);



Bila dilihat pada browser hingga hasilnya hendak semacam ini:
20200310205023649403bfa8d61e879afc65f4a050c502.png
Bersumber pada hasil di atas, styling cuma hendak diterapkan pada elemen <h1> yang terletak di document tree. Sebaliknya elemen <h1> yang terletak pada shadow dom tidak hendak terbawa- bawa dengan styling tersebut. Lalu, gimana triknya kita melaksanakan styling pada Shadow DOM?
Kita bisa melaksanakannya dengan meningkatkan template <style> di dalam shadowRoot.innerHTML.  Contohnya semacam ini:

  1. // menetapkan styling pada Shadow DOM

  2. shadowRoot.innerHTML += `

  3.  <style>

  4.    h1 {

  5.      color: green;

  6.    }

  7.  </style>

  8. `;


Hingga element <style> tersebut hendak terletak di dalam shadow tree serta hendak berakibat pada elemen yang terdapat di dalamnya.
20200310205206823dcc0fb3c6ef38cb5e0a7563f0590d.png

Lokasi: Indonesia

Posting Komentar untuk "Apa Itu Shadow DOM?"