Belajar Shadow DOM Dasar Untuk Web Components

Halaman website yang ditampilkan terbentuk dari HTML. HTML sangat membantu kita karena ia cukup mudah dipelajari dan digunakan. HTML mudah dipahami oleh kita namun tidak untuk mesin.

sehingga terciptalah DOM (Document Object Model) sebagai penghubung antara HTML dengan bahasa pemrograman.

Di dalam DOM seluruh struktur HTML dapat digambarkan dalam bentuk objek yang dapat dimanipulasi melalui bahasa pemrograman, salah satunya JavaScript.

Ketika browser memuat halaman, HTML akan secara otomatis dimodelkan menjadi sebuah object dan nodes hingga membentuk “DOM Tree”. Berikut contoh DOM Tree yang terbuat:

Dari struktur HTML berikut:


<html>

  <head>

    <title>Web Components</title>

  </head>

  <body>

    <h1>Mari belajar Shadow DOM</h1>

  </body>

</html>

Object dan nodes yang dihasilkan dari DOM akan memiliki properti dan method yang dapat kita manfaatkan untuk memanipulasi konten di dalamnya.

Seluruh elemen dan style pada HTML (apapun yang berada di dalam DOM) akan terekspos secara global dan nilainya dapat kita peroleh dari mana saja.

Biasanya untuk mendapatkan element kita gunakan document.querySelector, setelah itu kita dapat leluasa mengontrol elemen, mengubah konten di dalamnya ataupun mengubah styling yang diterapkan.

Encapsulation

Saat ini banyak web yang dibangun melalui arsitektur berbasis komponen sehingga diharapkan komponen tersebut dapat digunakan kembali.

Namun bukankah tidak baik jika komponen tersebut dapat diganggu dan diubah dari luar? Sebaiknya komponen dapat bertahan dari gangguan luar agar secara visual atau fungsinya agar tetap dalam keadaan aslinya. Maka dari itu, kita perlu menerapkan konsep enkapsulasi pada komponen tersebut

What is Shadow DOM?

Saat ini kita mungkin bisa menerapkan konsep enkapsulasi dengan menggunakan <iframe> agar komponen terpisah dari gangguan luar. Namun teknik ini bukan cara yang baik, berat, dan dapat menimbulkan masalah. Lantas bagaimana solusinya? Gunakanlah 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:

Sumber: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

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.

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

Basic Usage

Potongan kode untuk materi ini:

Untuk melampirkan Shadow DOM pada elemen penggunaan sangat mudah, yaitu dengan menggunakan properti attachShadow pada elemen-nya seperti ini:

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

Dan struktur DOM tree yang terbentuk akan tampak seperti ini:

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

Menggunakan nilai open berarti kita memperbolehkan untuk mengakses properti shadowRoot melalui elemen yang melampirkan 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 berarti kita sama sekali tidak dapat mengakses Shadow Tree selain melalui variabel yang kita definisikan ketika melampirkan Shadow DOM.


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

divElement.shadowRoot // null;

shadowRoot // # shadow-root (closed)

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.

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 dilihat pada browser maka hasilnya akan seperti ini:

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?

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


// menetapkan styling pada Shadow DOM

shadowRoot.innerHTML += `

 <style>

   h1 {

     color: green;

   }

 </style>

`;

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

Shadow DOM in Web Components

Potongan kode untuk materi ini: https://repl.it/@dicodingacademy/163-03-shadow-dom-in-web-component?lite=true

Untuk membantu menerapkan enkapsulasi pada custom element, Shadow DOM berperan sebagai salah satu API standar yang digunakan dalam membuat Web Component (Hal ini distandarisasi oleh W3C). Kita sudah belajar bagaimana menerapkan Shadow DOM pada elemen yang berada pada Document Tree, namun bagaimana caranya bila itu diterapkan pada custom element?

Jawabannya cukup mudah! Mari kita lihat kembali contoh custom element yang pernah kita buat pada materi Styling Custom Element without Shadow DOM

index.html


<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

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

   <title>Styling without Shadow DOM</title>

   <link rel="stylesheet" href="style.css"/>

 </head>

<body>

   <image-figure

     src="https://i.imgur.com/iJq78XH.jpg"

     alt="Dicoding Logo"

     caption="Huruf g dalam logo Dicoding">

     </image-figure>

 

 

     <!-- Styling di dalam image-figure akan mempengaruhi juga elemen di luarnya -->

     <figure>

       <img src="https://i.imgur.com/iJq78XH.jpg"

       alt="Dicoding logo"/>

       <figcaption>Huruf g dalam logo Dicoding</figcaption>

     </figure>

   <script src="image-figure.js"></script>

 </body>

</html>

image-figure.js


class ImageFigure extends HTMLElement {

 

 

 connectedCallback() {

   this.src = this.getAttribute("src") || null;

   this.alt = this.getAttribute("alt") || null;

   this.caption = this.getAttribute("caption") || null;

   this.render();

 }

 

 

 render() {

   this.innerHTML = `

     <style>

       figure {

         border: thin #c0c0c0 solid;

         display: flex;

         flex-flow: column;

         padding: 5px;

         max-width: 220px;

         margin: auto;

       }

 

 

       figure > img {

         max-width: 220px;

       }

 

 

       figure > figcaption {

         background-color: #222;

         color: #fff;

         font: italic smaller sans-serif;

         padding: 3px;

         text-align: center;

       }

     </style>

 

 

     <figure>

       <img src="${this.src}"

           alt="${this.alt}">

       <figcaption>${this.caption}</figcaption>

     </figure>

   `;

 }

 

 

 attributeChangedCallback(name, oldValue, newValue) {

   this[name] = newValue;

   this.render();

 }

 

 

 static get observedAttributes() {

   return ["caption"];

 }

}

 

 

customElements.define("image-figure", ImageFigure);

Ketika kode tersebut dijalankan pada browser, kita bisa melihat terdapat dua komponen <figure> yang ditampilkan, salah satunya adalah custom element.

Kita bisa melihat juga bahwa keduanya memiliki styling yang sama, padahal kita hanya menetapkan styling di dalam komponen ImageFigure saja.

Yup, hal tersebut wajar terjadi karena pada custom element kita tidak menetapkan Shadow DOM sehingga styling pada custom element akan berdampak juga terhadap komponen di luarnya.

Dalam melampirkan Shadow DOM pada custom element sama seperti pada elemen biasanya, yaitu menggunakan attachShadow.

Namun dalam custom element, kita lakukan pada constructor class-nya seperti ini:


class ImageFigure extends HTMLElement {

 

 constructor() {

   super();

   this._shadowRoot = this.attachShadow({mode: "open"});

 }

 

  .....

}

Agar nilai shadowRoot dapat diakses pada fungsi mana saja di class, maka kita perlu memasukkan nilai shadowRoot pada properti class menggunakan this.

Kita bebas menentukan nama properti sesuai keinginan, namun untuk memudahkan kita gunakan nama _shadowRoot. Lalu mengapa penamaannya menggunakan tanda underscore (_) di depannya? Jawabannya, this pada konteks class ini merupakan HTMLElement dan ia sudah memiliki properti dengan nama shadowRoot.

Untuk membedakan properti _shadowRoot asli dengan properti baru yang kita buat, kita bisa tambahkan underscore di awal penamaannya.

Hal ini dibutuhkan karena jika kita menerapkan mode closed pada Shadow DOM, nilai properti shadowRoot akan mengembalikan null, sehingga tidak ada cara lain untuk kita mengakses Shadow Tree.

Setelah menerapkan Shadow DOM pada constructor, ketika ingin mengakses apapun yang merupakan properti dari DOM kita harus melalui _shadowRoot.

Contohnya ketika ingin menerapkan template HTML, kita tidak bisa menggunakan langsung this.innerHTML, namun perlu melalui this._shadowRoot.innerHTML.

Sehingga kita perlu menyesuaikan kembali beberapa kode yang terdapat pada fungsi render menjadi seperti ini:

render() {
this._shadowRoot.innerHTML = `
<style>
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
}
figure > img {
max-width: 220px;
}
figure > figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
</style>
<figure>
<img src="${this.src}"
alt="${this.alt}">
<figcaption>${this.caption}</figcaption>
</figure>
`;
}

Dengan begitu sekarang styling pada komponen hanya berlaku pada komponen itu sendiri. Begitu juga sebaliknya, styling yang dituliskan di luar dari komponen tidak akan berdampak pada elemen di dalam komponen.

Solution: Menerapkan Shadow DOM pada Proyek Club Finder

Apakah Anda berhasil menerapkan shadow DOM pada custom element di proyek Club Finder? Jika belum, mari kita lakukan bersama-sama.

Menerapkan Shadow DOM pada App Bar

Kita mulai dari <app-bar> component yuk. Pertama kita buka dulu proyek club finder dengan text editor yang kita gunakan.

Kemudian buka berkas script -> component -> app-bar.js, buat constructor dari class tersebut dan di dalamnya kita tetapkan shadow root seperti ini:

class AppBar extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
connectedCallback(){
this.render();
}
render() {
this.innerHTML = `<h2>Club Finder</h2>`;
}
}
customElements.define("app-bar", AppBar);

Karena kita sudah menerapkan Shadow DOM pada AppBar, jangan lupa pada fungsi render(), kita ubah this.innerHTML menjadi this.shadowDOM.innerHTML.


class AppBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.shadowDOM.innerHTML = `<h2>Club Finder</h2>`;

   }

}

 

customElements.define("app-bar", AppBar);

Kemudian buka berkas style -> appbar.css dan pindahkan (cut) seluruh kode yang ada pada berkas tersebut.


app-bar {

   display: block;

   padding: 16px;

   width: 100%;

   background-color: cornflowerblue;

   color: white;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <h2> pada fungsi render() di berkas app-bar.js seperti ini:

class AppBar extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
connectedCallback(){
this.render();
}
render() {
this.shadowDOM.innerHTML = `
<style>
app-bar {
display: block;
padding: 16px;
width: 100%;
background-color: cornflowerblue;
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>
<h2>Club Finder</h2>`;
}
}
customElements.define("app-bar", AppBar);

Coba kita simpan perubahan yang diterapkan kemudian lihat perubahannya pada browser.

Ups, pada browser kita dapat melihat title yang ditampilkan pada <app-bar> tampak berantakan. Untuk menanganinya, kita perlu menyesuaikan kembali style yang diterapkan pada custom element menjadi seperti ini:

class AppBar extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
connectedCallback(){
this.render();
}
render() {
this.shadowDOM.innerHTML = `
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:host {
display: block;
width: 100%;
background-color: cornflowerblue;
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
h2 {
padding: 16px;
}
</style>
<h2>Club Finder</h2>`;
}
}
customElements.define("app-bar", AppBar);

Pada perubahan styling tersebut kita menambahkan


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

 }

Yang digunakan untuk menghilangkan seluruh margin dan padding standar yang diterapkan pada element html. Dan kita juga mengubah pengaturan box-sizing menjadi border-box.

Lalu kode pada kode styling lainnya juga kita melihat bahwa selector app-bar digantikan dengan :host. Apa itu :host? Selector :host merupakan selector yang digunakan untuk menunjuk element :host yang menerapkan Shadow DOM. Pada host kita tidak dapat mengatur padding sehingga kita perlu memindahkannya pada elemen <h2>.

Setelah melakukan perubahan tersebut simpan (save) kembali perubahannya dan lihat hasilnya pada browser, seharusnya <app-bar> sudah ditampilkan dengan baik.

Karena kita sudah tidak membutuhkan lagi berkas src -> styles -> appbar.css, kita dapat menghapus berkas tersebut.

Jangan lupa untuk menghapus import css tersebut pada src -> styles -> style.css.


@import "clublist.css";

@import "searchbar.css";

 

* {

   padding: 0;

   margin: 0;

   box-sizing: border-box;

}

 

body {

   font-family: sans-serif;

}

 

main {

   width: 90%;

   max-width: 800px;

   margin: 32px auto;

}

Menerapkan Shadow DOM pada Search Bar

Setelah berhasil menerapkan Shadow DOM pada App Bar, selanjutnya kita terapkan Shadow DOM pada search bar. Silakan buka berkas src -> script -> component -> search-bar.js, kemudian buat constructor dan terapkan Shadow DOM di dalamnya.

class SearchBar extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
connectedCallback(){
this.render();
}
set clickEvent(event) {
this._clickEvent = event;
this.render();
}
get value() {
return this.querySelector("#searchElement").value;
}
render() {
this.innerHTML = `
<div id="search-container" class="search-container">
<input placeholder="Search football club" id="searchElement" type="search">
<button id="searchButtonElement" type="submit">Search</button>
</div>
`;
this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);
}
}
customElements.define("search-bar", SearchBar);

Sama seperti yang kita lakukan pada component App Bar, kita ubah this.innerHTML menjadi this.shadowDOM.InnerHTML pada fungsi render().

class SearchBar extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
connectedCallback(){
this.render();
}
set clickEvent(event) {
this._clickEvent = event;
this.render();
}
get value() {
return this.querySelector("#searchElement").value;
}
render() {
this.shadowDOM.innerHTML = `
<div id="search-container" class="search-container">
<input placeholder="Search football club" id="searchElement" type="search">
<button id="searchButtonElement" type="submit">Search</button>
</div>
`;
this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);
}
}
customElements.define("search-bar", SearchBar);

Selain itu juga kita ubah pemanggilan this.querySelector menjadi this.shadowDOM.querySelector pada fungsi render() dan get value().

class SearchBar extends HTMLElement {
..........
get value() {
return this.shadowDOM.querySelector("#searchElement").value;
}
render() {
.........
this.shadowDOM.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);
}
}
...........

Kemudian buka berkas src -> styles -> searchbar.css, pindahkan (cut) seluruh kode yang terdapat pada berkas tersebut.

.search-container {
max-width: 800px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
border-radius: 5px;
display: flex;
position: sticky;
top: 10px;
background-color: white;
}
.search-container > input {
width: 75%;
padding: 16px;
border: 0;
border-bottom: 1px solid cornflowerblue;
font-weight: bold;
}
.search-container > input:focus {
outline: 0;
border-bottom: 2px solid cornflowerblue;
}
.search-container > input:focus::placeholder {
font-weight: bold;
}
.search-container > input::placeholder {
color: cornflowerblue;
font-weight: normal;
}
.search-container > button {
width: 23%;
cursor: pointer;
margin-left: auto;
padding: 16px;
background-color: cornflowerblue;
color: white;
border: 0;
text-transform: uppercase;
}
@media screen and (max-width: 550px){
.search-container {
flex-direction: column;
position: static;
}
.search-container > input {
width: 100%;
margin-bottom: 12px;
}
.search-container > button {
width: 100%;
}
}

Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <div> pada fungsi render() di berkas search-bar.js seperti ini:

class SearchBar extends HTMLElement {
.........
render() {
this.shadowDOM.innerHTML = `
<style>
.search-container {
max-width: 800px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
border-radius: 5px;
display: flex;
position: sticky;
top: 10px;
background-color: white;
}
.search-container > input {
width: 75%;
padding: 16px;
border: 0;
border-bottom: 1px solid cornflowerblue;
font-weight: bold;
}
.search-container > input:focus {
outline: 0;
border-bottom: 2px solid cornflowerblue;
}
.search-container > input:focus::placeholder {
font-weight: bold;
}
.search-container > input::placeholder {
color: cornflowerblue;
font-weight: normal;
}
.search-container > button {
width: 23%;
cursor: pointer;
margin-left: auto;
padding: 16px;
background-color: cornflowerblue;
color: white;
border: 0;
text-transform: uppercase;
}
@media screen and (max-width: 550px){
.search-container {
flex-direction: column;
position: static;
}
.search-container > input {
width: 100%;
margin-bottom: 12px;
}
.search-container > button {
width: 100%;
}
}
</style>
<div id="search-container" class="search-container">
<input placeholder="Search football club" id="searchElement" type="search">
<button id="searchButtonElement" type="submit">Search</button>
</div>
`;
.......
}
}
customElements.define("search-bar", SearchBar);

Simpan perubahan yang dilakukan kemudian lihat hasilnya pada browser.

Komponen Search Bar tampak normal dan berfungsi dengan baik sehingga kita tidak perlu menyesuaikan lagi styling-nya.

Karena kita sudah tidak membutuhkan lagi berkas src -> styles -> searchbar.css, kita dapat menghapus berkas tersebut.

Jangan lupa untuk menghapus import css tersebut pada src -> styles -> style.css.


@import "clublist.css";

 

* {

   padding: 0;

   margin: 0;

   box-sizing: border-box;

}

 

body {

   font-family: sans-serif;

}

 

main {

   width: 90%;

   max-width: 800px;

   margin: 32px auto;

}

Menerapkan Shadow DOM pada Club List dan Club Item

Terakhir kita terapkan Shadow DOM pada komponen club list dan club item. Silakan buka berkas src -> script -> component -> club-list.js, kemudian buat constructor dan terapkan Shadow DOM di dalamnya.


import './club-item.js';

import './club-item.js';
class ClubList extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
set clubs(clubs) {
this._clubs = clubs;
this.render();
}
renderError(message) {
this.innerHTML = "";
this.innerHTML += `<h2 class="placeholder">${message}</h2>`;
}
render() {
this.innerHTML = "";
this._clubs.forEach(club => {
const clubItemElement = document.createElement("club-item");
clubItemElement.club = club
this.appendChild(clubItemElement);
})
}
}
customElements.define("club-list", ClubList);

Kemudian ubah seluruh kode this.innerHTML menjadi this.shadowDOM.innerHTML dan this.appendChild menjadi this.shadowDOM.appendChild.

import './club-item.js';
class ClubList extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
set clubs(clubs) {
this._clubs = clubs;
this.render();
}
renderError(message) {
this.shadowDOM.innerHTML = "";
this.shadowDOM.innerHTML += `<h2 class="placeholder">${message}</h2>`;
}
render() {
this.shadowDOM.innerHTML = "";
this._clubs.forEach(club => {
const clubItemElement = document.createElement("club-item");
clubItemElement.club = club
this.shadowDOM.appendChild(clubItemElement);
})
}
}
customElements.define("club-list", ClubList);

Kemudian buka berkas src -> styles -> clublist.css dan pindahkan (cut) kode styling dengan selector club-list > .placeholder


club-list > .placeholder {

   font-weight: lighter;

   color: rgba(0,0,0,0.5);

   -webkit-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

}

Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <h2> fungsi renderError() di berkas club-list.js seperti ini:

import './club-item.js';
class ClubList extends HTMLElement {
.........
renderError(message) {
this.shadowDOM.innerHTML = `
<style>
club-list > .placeholder {
font-weight: lighter;
color: rgba(0,0,0,0.5);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
`;
this.shadowDOM.innerHTML += `<h2 class="placeholder">${message}</h2>`;
}
.......
}
customElements.define("club-list", ClubList);

Hapus child selector (>) beserta kombinatornya, sisakan .placeholder sebagai selector dari styling tersebut. Sehingga kode pada berkas ini seluruhnya tampak seperti:

import './club-item.js';
class ClubList extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
set clubs(clubs) {
this._clubs = clubs;
this.render();
}
renderError(message) {
this.shadowDOM.innerHTML = `
<style>
.placeholder {
font-weight: lighter;
color: rgba(0,0,0,0.5);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
`;
this.shadowDOM.innerHTML += `<h2 class="placeholder">${message}</h2>`;
}
render() {
this.shadowDOM.innerHTML = "" ;
this._clubs.forEach(club => {
const clubItemElement = document.createElement("club-item");
clubItemElement.club = club
this.shadowDOM.appendChild(clubItemElement);
})
}
}
customElements.define("club-list", ClubList);

Simpan perubahan tersebut dan lihat hasilnya pada browser, tampilan dari daftar club akan sangat berantakan.

Tenang kita akan memperbaikinya dengan beranjak ke berkas src -> script -> component -> club-item.js.

Pada berkas tersebut buat sebuah constructor dan terapkan Shadow DOM di dalamnya.

class ClubItem extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
set club(club) {
this._club = club;
this.render();
}
render() {
this.innerHTML = `
<img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
<div class="club-info">
<h2>${this._club.name}</h2>
<p>${this._club.description}</p>
</div>`;
}
}
customElements.define("club-item", ClubItem);

Seperti biasa jangan lupa untuk mengubah this.innerHTML menjadi this.shadowDOM.innerHTML ya.

class ClubItem extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: "open"});
}
set club(club) {
this._club = club;
this.render();
}
render() {
this.shadowDOM.innerHTML = `
<img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
<div class="club-info">
<h2>${this._club.name}</h2>
<p>${this._club.description}</p>
</div>`;
}
}
customElements.define("club-item", ClubItem);

Selanjutnya buka kembali berkas src -> styles -> clublist.css dan pindahkan styling berikut:

club-item {
display: block;
margin-bottom: 18px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
club-item .fan-art-club {
width: 100%;
max-height: 300px;
object-fit: cover;
object-position: center;
}
.club-info {
padding: 24px;
}
.club-info > h2 {
font-weight: lighter;
}
.club-info > p {
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10; /* number of lines to show */
}

Tempel pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <img> pada fungsi render() di berkas club-item.js seperti ini:

class ClubItem extends HTMLElement {
.......
render() {
this.shadowDOM.innerHTML = `
<style>
club-item {
display: block;
margin-bottom: 18px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
club-item .fan-art-club {
width: 100%;
max-height: 300px;
object-fit: cover;
object-position: center;
}
.club-info {
padding: 24px;
}
.club-info > h2 {
font-weight: lighter;
}
.club-info > p {
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10; /* number of lines to show */
}
</style>
<img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
<div class="club-info">
<h2>${this._club.name}</h2>
<p>${this._club.description}</p>
</div>`;
}
}
......

Sesuaikan kembali selector pada styling tersebut menjadi seperti ini:

class ClubItem extends HTMLElement {
.....
render() {
this.shadowDOM.innerHTML = `
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:host {
display: block;
margin-bottom: 18px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
.fan-art-club {
width: 100%;
max-height: 300px;
object-fit: cover;
object-position: center;
}
.club-info {
padding: 24px;
}
.club-info > h2 {
font-weight: lighter;
}
.club-info > p {
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10; /* number of lines to show */
}
</style>
<img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
<div class="club-info">
<h2>${this._club.name}</h2>
<p>${this._club.description}</p>
</div>`;
}
}
........

Simpan perubahan tersebut dan lihat pada browser, seharusnya tampilan daftar tim sudah kembali normal.

Oh ya, sebelum beranjak kita buka kembali berkas src -> styles -> clublist.css. Di sana masih terdapat satu rule styling berikut:


club-list {

   display: block;

   margin-top: 32px;

   width: 100%;

   padding: 16px;

}

Jangan hapus rule styling tersebut karena kita masih menggunakannya untuk mengatur jarak daftar liga yang ditampilkan. Namun sebaiknya kita pindahkan rule styling tersebut pada berkas src -> styles -> style.css.

@import "clublist.css";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
main {
width: 90%;
max-width: 800px;
margin: 32px auto;
}
club-list {
display: block;
margin-top: 32px;
width: 100%;
padding: 16px;
}

Dengan begitu kita dapat leluasa menghapus berkas clublist.css dan menghapus @import pada berkas style.css.

Selamat! Kita sudah berhasil menerapkan Shadow DOM pada seluruh custom element yang digunakan di proyek Club Finder. Sampai ketemu di materi selanjutnya ya!

Langkah dari solution ini bisa Anda temukan juga pada repository berikut: https://github.com/dicodingacademy/a163-bfwd-labs/tree/110-club-finder-shadow-dom-solution