Apa Itu Shadow DOM? > 자유게시판

Apa Itu Shadow DOM?

페이지 정보

작성자 Jacob
댓글 0건 조회 49회 작성일 24-09-01 12:24

본문

<div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">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:</div><a name='more'></a> <div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><span class="fr-img-caption fr-fic fr-dib" style="box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; text-align: center; vertical-align: top; width: 873px;"><img alt="2020031020401056fdb6ae992399a36fcbfa50e75cf4ee.png" src="https://dicodingacademy.blob.core.windows.net/academies/2020031020401056fdb6ae992399a36fcbfa50e75cf4ee.png" style="border-style: none; box-sizing: border-box; display: block; margin: auto; max-width: 100%; position: relative; vertical-align: middle;" />Sumber: <a href="https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM&sa=D&ust=1583841656284000" rel="noreferrer noopener" style="background-color: transparent; box-sizing: border-box; color: rgb(255, 84, 131) !important; text-decoration-line: none;" target="_blank">https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM</a></div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Shadow DOM dapat 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 dapat memiliki banyak element lagi layaknya Document Tree.</div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Terdapat beberapa terminologi yang perlu kita ketahui dari ilustrasi di atas:</div><ul style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem; margin-top: 0px;"><li dir="ltr" style="box-sizing: border-box;">Shadow host : Merupakan komponen/node yang terdapat pada regular DOM di mana shadow DOM terlampir pada komponen/node ini.</li><li dir="ltr" style="box-sizing: border-box;">Shadow tree : DOM Tree di dalam shadow DOM.</li><li dir="ltr" style="box-sizing: border-box;">Shadow boundary : Batas dari shadow DOM dengan regular DOM.</li><li dir="ltr" style="box-sizing: border-box;"><div dir="ltr" style="box-sizing: border-box; margin-bottom: 1rem;">Shadow root : Root node dari shadow tree.</div></li></ul><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Kita dapat memanipulasi elemen yang terdapat di dalam shadow tree layaknya pada document tree, namun cakupannya selama kita berada di dalam shadow boundary. Dengan kata lain, jika kita berada di document tree kita tidak dapat memanipulasi elemen bahkan menerapkan styling pada elemen yang terdapat di dalam shadow tree. Itulah mengapa shadow DOM dapat membuat komponen terenkapsulasi</div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Untuk melampirkan Shadow DOM pada elemen penggunaan sangat mudah, yaitu dengan menggunakan properti attachShadow pada elemen-nya seperti ini:</div><div class="panel panel-default panel-code" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><div class="panel-heading bg-light" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box;"><ul class="nav nav-pills pl-2 pr-2" role="tablist" style="box-sizing: border-box; display: flex; flex-wrap: wrap; list-style: none; margin-bottom: 0px; margin-top: 0px; padding-left: 0px; padding-right: 0.5rem !important;"><li class="nav-item" style="box-sizing: border-box; cursor: pointer;"><a aria-selected="true" class="nav-link active show" data-toggle="pill" href="https://www.dicoding.com/academies/163/tutorials/7057?from=7050#tab1-code1" role="tab" style="background: 0px 0px; border-bottom: 4px solid rgb(44, 62, 80); border-radius: 0px; box-sizing: border-box; color: rgb(44, 62, 80) !important; display: block; font-weight: 700; padding: 0.5rem; text-decoration-line: none;">main.js</a></li><li class="nav-item" style="box-sizing: border-box; cursor: pointer;"> </li></ul></div><div class="panel-body bg-light p-2" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box; padding: 0.5rem !important;"><div class="tab-content" style="box-sizing: border-box;"><div class="tab-pane show active" id="tab1-code1" role="tabpanel" style="box-sizing: border-box;"><pre class="prettyprint linenums prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// Shadow Host</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">const divElement = document.createElement("div");</li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">// element yang berada di dalam Shadow DOM</li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">const headingElement = document.createElement("h1");</li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">headingElement.innerText = "Ini merupakan konten di dalam shadow DOM";</li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;">// Melampirkan shadow root pada shadow host</li> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// Mengatur mode shadow dengan nilai open</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">const shadowRoot = divElement.attachShadow(mode: "open");</li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">// Memasukkan element heading ke dalam shadow root</li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">shadowRoot.appendChild(headingElement);</li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// Memasukkan elemen shadow host ke regular DOM</li> <li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;">document.body.appendChild(divElement);</li> </ol> </pre></div></div></div></div><div class="panel-heading bg-light" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px;"><ul class="nav nav-pills pl-2 pr-2" role="tablist" style="box-sizing: border-box; display: flex; flex-wrap: wrap; list-style: none; margin-bottom: 0px; margin-top: 0px; padding-left: 0px; padding-right: 0.5rem !important;"><li class="nav-item" style="box-sizing: border-box; cursor: pointer;"><a aria-selected="true" class="nav-link show active" data-toggle="pill" href="https://www.dicoding.com/academies/163/tutorials/7057?from=7050#tab1-code2" role="tab" style="background: 0px 0px; border-bottom: 4px solid rgb(44, 62, 80); border-radius: 0px; box-sizing: border-box; color: rgb(44, 62, 80) !important; display: block; font-weight: 700; padding: 0.5rem; text-decoration-line: none;">index.html</a></li></ul></div><div class="panel-body bg-light p-2" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; padding: 0.5rem !important;"><div class="tab-content" style="box-sizing: border-box;"><div class="tab-pane show active" id="tab1-code2" role="tabpanel" style="box-sizing: border-box;"><pre class="prettyprint linenums prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><!DOCTYPE html></li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><html></li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> <head></li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   <meta charset="utf-8"></li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">   <meta name="viewport" content="width=device-width"></li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   <title>Shadow DOM Basic Usage</title></li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </head></li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> <body></li> <li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> <script src="main.js"></script></li> <li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;"> </body></li> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"></html></li> </ol> </pre></div></div></div><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Jika kita lihat pada browser, maka struktur HTML yang akan dihasilkan adalah seperti ini:</div><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"> <img alt="2020031020442138d22cf8f4814aacc795f563c3015892.png" class="fr-fic fr-dib" src="https://dicodingacademy.blob.core.windows.net/academies/2020031020442138d22cf8f4814aacc795f563c3015892.png" style="border-style: none; box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; vertical-align: top;" /></div><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Dan struktur DOM tree yang terbentuk akan tampak seperti ini:</div><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><img alt="20200310204452a9e4788ac5f7f206c20debfa0bc87524.png" class="fr-fic fr-dib" src="https://dicodingacademy.blob.core.windows.net/academies/20200310204452a9e4788ac5f7f206c20debfa0bc87524.png" style="border-style: none; box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; vertical-align: top;" /></div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">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". </div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Menggunakan nilai open berarti kita memperbolehkan untuk mengakses properti shadowRoot melalui elemen yang melampirkan Shadow DOM. </div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">divElement.attachShadow;</li> </ol> </pre><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">properti shadowRoot mengembalikan struktur DOM yang berada pada shadow tree.</div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><img alt="20200310204643a7a1f999761eaf74f9476e50013bb373.gif" class="fr-fic fr-dib" src="https://dicodingacademy.blob.core.windows.net/academies/20200310204643a7a1f999761eaf74f9476e50013bb373.gif" style="border-style: none; box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; vertical-align: top;" /></div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Namun jika kita menggunakan nilai closed maka properti shadowRoot akan mengembalikan nilai null. </div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">const shadowRoot = divElement.attachShadow(mode: "closed");</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">divElement.shadowRoot // null;</li> </ol> </pre><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Hal ini berarti kita sama sekali tidak dapat mengakses Shadow Tree selain melalui variabel yang kita definisikan ketika melampirkan Shadow DOM.</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">const shadowRoot = divElement.attachShadow(mode: "closed");</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">divElement.shadowRoot // null;</li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">shadowRoot // # shadow-root (closed)</li> </ol> </pre><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><img alt="2020031020483296ef7fce493fd7c0528697c3fa03565b.gif" class="fr-fic fr-dib" src="https://dicodingacademy.blob.core.windows.net/academies/2020031020483296ef7fce493fd7c0528697c3fa03565b.gif" style="border-style: none; box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; vertical-align: top;" /></div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">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.</div><div class="panel panel-default panel-code" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><div class="panel-heading bg-light" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box;"><ul class="nav nav-pills pl-2 pr-2" role="tablist" style="box-sizing: border-box; display: flex; flex-wrap: wrap; list-style: none; margin-bottom: 0px; margin-top: 0px; padding-left: 0px; padding-right: 0.5rem !important;"><li class="nav-item" style="box-sizing: border-box; cursor: pointer;"><a class="nav-link active" data-toggle="pill" href="https://www.dicoding.com/academies/163/tutorials/7057?from=7050#tab2-code1" role="tab" style="background: 0px 0px; border-bottom: 4px solid rgb(44, 62, 80); border-radius: 0px; box-sizing: border-box; color: rgb(44, 62, 80) !important; display: block; font-weight: 700; padding: 0.5rem; text-decoration-line: none;"> index.html</a></li><li class="nav-item" style="box-sizing: border-box; cursor: pointer;"> </li></ul></div><div class="panel-body bg-light p-2" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box; padding: 0.5rem !important;"><div class="tab-content" style="box-sizing: border-box;"><div class="tab-pane show active" id="tab2-code1" role="tabpanel" style="box-sizing: border-box;"><pre class="prettyprint linenums prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><!DOCTYPE html></li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><html></li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> <head></li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   <meta charset="utf-8"></li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">   <meta name="viewport" content="width=device-width"></li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   <title>Shadow DOM Basic Usage</title></li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">   <style></li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">       h1 </li> <li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">         color: red;</li> <li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;">       </li> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">   </style></li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </head></li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> <body></li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   <h1>Ini merupakan konten yang berada di Document tree</h1></li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">   <script src="main.js"></script></li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </body></li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"></html></li> </ol> </pre></div></div></div></div><div class="panel-heading bg-light" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px;"><ul class="nav nav-pills pl-2 pr-2" role="tablist" style="box-sizing: border-box; display: flex; flex-wrap: wrap; list-style: none; margin-bottom: 0px; margin-top: 0px; padding-left: 0px; padding-right: 0.5rem !important;"><li class="nav-item" style="box-sizing: border-box; cursor: pointer;"><a aria-selected="true" class="nav-link active show" data-toggle="pill" href="https://www.dicoding.com/academies/163/tutorials/7057?from=7050#tab2-code2" role="tab" style="background: 0px 0px; border-bottom: 4px solid rgb(44, 62, 80); border-radius: 0px; box-sizing: border-box; color: rgb(44, 62, 80) !important; display: block; font-weight: 700; padding: 0.5rem; text-decoration-line: none;">main.js</a></li></ul></div><div class="panel-body bg-light p-2" style="background-color: rgb(248, 249, 250) !important; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; padding: 0.5rem !important;"><div class="tab-content" style="box-sizing: border-box;"><div class="tab-pane active show" id="tab2-code2" role="tabpanel" style="box-sizing: border-box;"><pre class="prettyprint linenums prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// Shadow Host</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">const divElement = document.createElement("div");</li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">// element yang berada di dalam Shadow DOM</li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">const headingElement = document.createElement("h1");</li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">headingElement.innerText = "Ini merupakan konten di dalam shadow DOM";</li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;">// Melampirkan shadow root pada shadow host</li> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// Mengatur mode shadow dengan nilai open</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">const shadowRoot = divElement.attachShadow(mode: "open");</li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">// Memasukkan element heading ke dalam shadow root</li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">shadowRoot.appendChild(headingElement);</li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"> </li> <li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// Memasukkan elemen shadow host ke regular DOM</li> <li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;">document.body.appendChild(divElement);</li> </ol> </pre></div></div></div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"> </div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Jika dilihat pada browser maka hasilnya akan seperti ini:</div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"> <img alt="20200310205023649403bfa8d61e879afc65f4a050c502.png" class="fr-fic fr-dib" src="https://dicodingacademy.blob.core.windows.net/academies/20200310205023649403bfa8d61e879afc65f4a050c502.png" style="border-style: none; box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; vertical-align: top;" /></div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">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?</div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Kita dapat melakukannya dengan menambahkan template <style> di dalam shadowRoot.innerHTML.  Contohnya seperti ini:</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"> <li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;">// menetapkan styling pada Shadow DOM</li> <li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">shadowRoot.innerHTML += `</li> <li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> <style></li> <li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   h1 </li> <li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;">     color: Tukang Aluminium green;</li> <li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">   </li> <li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"> </style></li> <li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;">`;</li> </ol> </pre><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Maka element <style> tersebut akan bera

이전글ИРЛАНДСКИЙ АНГЕЛ (2024) СМОТРЕТЬ ОНЛАЙН БЕСПЛАТНО 24.09.01
다음글Learn the Secrets of Internet Casino Vovan Vovan Bonuses You Must Use 24.09.01

댓글목록

등록된 댓글이 없습니다.

페이지 정보

본문

댓글목록

개인정보처리방침서비스이용약관이메일무단수집거부

개인정보처리방침 서비스이용약관이메일무단수집거부