Ihsan Magazine – Kali ini kita akan mencoba belajar membuat Custom Element dasar di Javascript, apa itu Custom Element? Gampang nya Custom Element seperti kita Membuat Tag HTML baru untuk Front End Developer.
Bisa untuk memperluas elemen bawaan HTML, dan masih banyak lagi, dasarnya menggunakan\ Elements global digunakan untuk mendefinisikan elemen khusus dan mengajarkan tag baru pada browser.
Panggil customElements.define() dengan nama tag yang ingin Anda buat dan class JavaScript yang memperluas HTMLElement dasar.
Jika kita telaah dengan seksama, pada proyek Club Finder terdapat 4 (empat) bagian yang berpotensi untuk dijadikan custom element, yaitu:
App Bar : Komponen di posisi atas yang menunjukkan identitas atau nama dari aplikasi web.
Search Bar : Komponen yang terdiri dari elemen dan dan berfungsi untuk melakukan pencarian club sesuai dengan input pengguna.
Club List : Komponen yang berfungsi untuk menampung data dari hasil pencarian, kemudian menampilkannya dalam bentuk list.
Club Item : Komponen yang menampilkan data individual club yang diberikan dari club list. Komponen ini terdiri dari gambar, nama, dan deskripsi singkat club.
Solution: Membuat app-bar Component
Apakah Anda berhasil menerapkan custom element pada proyek Club Finder? Jika belum, mari kita lakukan bersama-sama. Kita mulai dari komponen termudah terlebih dahulu yaitu App Bar.
Agar mengelola berkas pada proyek jadi lebih mudah, kita perlu membuat folder baru dengan nama “component” di dalam folder src -> script.
Folder ini akan menampung berkas JavaScript yang digunakan dalam membuat custom element.
Lalu di dalam folder component, buat berkas JavaScript baru dengan nama “app-bar.js”. Kemudian kita buat class dengan nama AppBar yang mewarisi sifat HTMLElement.
classAppBarextendsHTMLElement{
}
Kemudian di dalam body block classnya, kita implementasi method connectedCallback dan membuat fungsi render.
classAppBarextendsHTMLElement{
connectedCallback(){
}
render(){
}
}
Seperti yang sudah kita ketahui, connectedCallback() akan terpanggil ketika element telah diterapkan pada DOM. Jika kita ingin element ini ketika diterapkan langsung melakukan rendering maka kita dapat memanggil fungsi this.render() di dalam connectedCallback.
classAppBarextendsHTMLElement{
connectedCallback(){
this.render();
}
render(){
}
}
Lalu pada fungsi render, kita tuliskan kode yang berfungsi untuk menampilkan elemen yang dibutuhkan pada melalui properti this.innerHTML. Apa saja yang dibutuhkan? Kita bisa melihatnya pada berkas index.html.
<divid="appBar"class="app-bar">
Club Finder
Di dalam elemen terdapat elemen
yang menerapkan class “app-bar”. Nah kita copy element di dalam app-bar, dan paste untuk dijadikan nilai pada this.innerHTML di fungsi render().
classAppBarextendsHTMLElement{
connectedCallback(){
this.render();
}
render(){
this.innerHTML =`
Club Finder
`;
}
}
Lalu di akhir berkas app-bar.js, jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.
classAppBarextendsHTMLElement{
connectedCallback(){
this.render();
}
render(){
this.innerHTML =`
Club Finder
`;
}
}
customElements.define("app-bar",AppBar);
Dengan begitu kita dapat mengubah penerapan app-bar pada index.html dengan menggunakan tag .
Terakhir, agar kode pada berkas app-bar.js tereksekusi, impor berkas app-bar.js pada berkas app.js, seperti ini:
import"./src/script/component/app-bar.js";
Tuliskan kode tersebut pada awal berkas app.js, sehingga keseluruhan kode pada berkasnya akan tampak seperti ini:
Kemudian coba kita buka proyeknya menggunakan local server. Inilah tampilan hasilnya:
Oops, tampilan App Bar tampak berantakan. Kita perlu memperbaiki css yang digunakan pada elemen App Bar sebelumnya. Buka berkas appbar.css lalu ubah selector-nya dari .app-bar menjadi app-bar.
app-bar {
padding:16px;
width:100%;
background-color: cornflowerblue;
color: white;
box-shadow:04px8px0 rgba(0,0,0,0.2);
}
Lalu lihat kita lihat hasilnya.
Yah, kini teks “Club Finder” tidak tampak karena background element tidak bekerja dengan baik. Kenapa begini yah? Pasalnya, custom element standarnya merupakan inline element, sehingga tidak akan mengisi panjang lebar parent element-nya. Solusinya adalah dengan mengubah sifat inline pada custom element menjadi block dengan cara menambahkan properti display dengan nilai block pada selector app-bar.
app-bar {
display: block;
padding:16px;
width:100%;
background-color: cornflowerblue;
color: white;
box-shadow:04px8px0 rgba(0,0,0,0.2);
}
Dengan begitu tampilan kita berhasil membuat custom element dengan baik!
Membuat search-bar Component
Pembuatan elemen lebih sedikit rumit dari pembuatan komponen sebelumnya, karena di dalam komponen search bar terdapat element dan . Kombinasi kedua element tersebut digunakan dalam mencari data club. Sebisa mungkin kita membuat custom element sehingga mempermudah kala menggunakan komponen tersebut.
Mari kita mulai dengan membuat berkas JavaScript baru dengan nama search-bar.js. Kemudian di dalamnya kita membuat class SearchBar dengan mewarisi sifat HTMLElement.
classSearchBarextendsHTMLElement{
}
Kemudian kita implementasi method connectedCallback dan membuat fungsi render.
classSearchBarextendsHTMLElement{
connectedCallback(){
}
render(){
}
}
Lalu panggil fungsi render() di dalam connectedCallback().
classSearchBarextendsHTMLElement{
connectedCallback(){
this.render();
}
render(){
}
}
Di dalam fungsi render kita ambil elemen yang dibutuhkan untuk ditampilkan dari berkas index.html.
Agar mudah, copy seluruh kode tersebut dan paste untuk dijadikan nilai this.innerHTML di dalam fungsi render.
classSearchBarextendsHTMLElement{
connectedCallback(){
this.render();
}
render(){
this.innerHTML =`
Search
`;
}
}
Karena di dalam elemen ini terdapat yang harus memiliki sebuah event ketika ia ditekan, maka kita harus menyediakan setter. Gunanya untuk menetapkan fungsi event agar dapat mudah diterapkan dari luar class SearchBar.
classSearchBarextendsHTMLElement{
connectedCallback(){
this.render();
}
set clickEvent(event){
this._clickEvent =event;
this.render();
}
render(){
this.innerHTML =`
Search
`;
}
}
Lalu kita terapkan this._clickEvent sebagai event pada element dengan cara menuliskan kode berikut pada akhir fungsi render():
Dengan begitu nantinya kita dapat mudah dalam clickEvent pada SearchBar yang digunakan di berkas main.js.
Pada berkas main.js juga kita memanfaatkan value dari element untuk mendapatkan kata kunci pencarian club. Agar mudah mendapatkan nilai value dari elemen yang terdapat pada search bar, kita buat fungsi getter yang mengembalikan nilai value dari elemen tersebut.
getvalue(){
returnthis.querySelector("#searchElement").value;
}
Sehingga keseluruhan kode yang terdapat berkas search-bar.js akan terlihat seperti ini:
Yeay, pembuatan custom element sudah selesai. Sekarang saatnya kita menggunakannya! Pertama ubahlah struktur html yang membentuk komponen pencarian dengan menggunakan tag . Silakan buka berkas index.html kemudian ubah kode berikut:
Lalu kita tidak membutuhkan deklarasi variabel buttonSearchElement karena sekarang kita dapat mengakses button pada komponen pencarian melalui searchElement. Jadi silakan hapus deklarasi variabel berikut:
Terakhir, karena berkas main.js perlu kode pada berkas search-bar.js tereksekusi, kita lakukan impor berkas search-bar.js pada berkas main.js, seperti ini:
import'../component/search-bar.js';
Tuliskan kode tersebut pada awal berkas main.js, sehingga keseluruhan kode pada berkasnya akan tampak seperti ini:
Kemudian coba kita buka proyeknya menggunakan local server kemudian lakukan pencarian dengan menggunakan kata kunci “Arsenal”. Hasilnya adalah tampilan berikut:
Solution: Membuat club-list dan club-item Component
Custom element selanjutnya yang perlu kita buat adalah dan . Masih ingat mengenai Nested Custom Element? Nah dalam membuat kedua custom element ini kita akan menggunakan custom element di dalam custom element. Atau biasa disebut dengan nested custom element.
Mari kita awali dengan membuat dua berkas JavaScript baru dengan nama “club-list.js” dan “club-item.js” pada src -> script -> component.
Membuat element
Langkah pertama kita buat custom element terlebih dahulu. Pada berkas club-list.js, kita buat class ClubList dengan mewarisi sifat HTMLElement.
classClubListextendsHTMLElement{
}
Kemudian kita buat 2 (dua) fungsi di dalamnya yaitu setterclubs, dan render.
classClubListextendsHTMLElement{
set clubs(clubs){
}
render(){
}
}
Fungsi set clubs digunakan untuk menetapkan properti this._clubs pada class ini. Nantinya properti tersebut akan digunakan pada fungsi render dalam membuat custom element .
set clubs(clubs){
this._clubs = clubs;
this.render();
}
Kemudian di dalam fungsi render, kita lakukan proses perulangan dengan menggunakan forEach pada this._clubs. Pada setiap iterasinya kita akan mendapatkan individual club dan pada saat itu juga kita buat custom element . Pada tiap elemen dibuat sebagai child dari element ini. Hasilnya. fungsi render akan tampak seperti ini:
Perlu satu fungsi lagi pada custom element ini, yaitu fungsi untuk menangani ketika hasil pencarian mengalami kegagalan atau tidak ditemukkan. Maka dari itu mari kita buat fungsi dengan nama renderError() dengan satu buah parameter yang merupakan pesan eror/alasan yang perlu ditampilkan.
renderError(message){
}
Untuk template html yang akan ditampilkan, kita dapat copy dari fungsi fallbackResult pada berkas src -> script -> view -> main.js.
clubListElement.innerHTML ="";
clubListElement.innerHTML +=`
${message}
`;
Lalu paste pada fungsi renderError() dan ubah clubListElement.innerHTML menjadi this.innerHTML.
renderError(message){
this.innerHTML ="";
this.innerHTML +=`
${message}
`;
}
Pada akhir berkas club-list.js jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.
customElements.define("club-list",ClubList);
Oh ya! Karena pada berkas ini kita menggunakan elemen yang nanti akan dituliskan pada berkas club-item.js, maka kita perlu melakukan impor berkas club-item.js di berkas ini.
import'./club-item.js';
Sehingga sekarang keseluruhan kode yang terdapat pada berkas ini akan tampak seperti ini:
Pembuatan element selesai! Sekarang kita lanjut dengan membuat elemen .
Membuat element
Pada berkas club-item.js, kita buat class ClubItem dengan mewarisi sifat HTMLElement.
classClubItemextendsHTMLElement{
}
Kemudian kita buat fungsi setterclub dan fungsi render.
classClubItemextendsHTMLElement{
set club(club){
}
render(){
}
}
Fungsi setter club berfungsi untuk menetapkan nilai club ke properti this._club yang nantinya akan digunakan pada fungsi render untuk menampilkan data individual club hasil pencarian. Sehingga kita sesuaikan kode di dalam fungsi setterclub menjadi seperti ini:
classClubItemextendsHTMLElement{
set club(club){
this._club = club;
this.render();
}
render(){
}
}
Lalu kita copy template html yang berada pada fungsi renderResult di berkas src -> script -> view -> main.js.
clubElement.innerHTML =`
${name}
${description}
`;
Kemudian paste template html pada this.innerHTML melalui fungsi render().
classClubItemextendsHTMLElement{
set club(club){
this._club = club;
this.render();
}
render(){
this.innerHTML =`
${name}
${description}
`;
}
}
Lalu kita sesuaikan kembali properti-properti yang digunakan pada html template, menjadi seperti ini:
classClubItemextendsHTMLElement{
set club(club){
this._club = club;
this.render();
}
render(){
this.innerHTML =`
${this._club.name}
${this._club.description}
`;
}
}
Karena pada this._club inilah properti dari objek club disimpan.
Kemudian pada akhir berkas club-item.js jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.
classClubItemextendsHTMLElement{
set club(club){
this._club = club;
this.render();
}
render(){
this.innerHTML =`
${this._club.name}
${this._club.description}
`;
}
}
customElements.define("club-item",ClubItem);
Dengan begitu elemen sudah siap digunakan.
Menggunakan element
Setelah membuat kedua custom element yang dibutuhkan, sekarang saatnya kita menggunakannya!
Silakan buka berkas index.html, kemudian ubah penerapan club list menggunakan elemen
berikut:
<divid="clubList">
Menjadi:
Selanjutnya buka berkas src -> script -> view -> main.js. Kita sesuaikan kembali selector pada saat melakukan binding clubListElement. Ubah kode berikut:
Sesuaikan juga kode yang terdapat pada fungsi fallbackResult, karena kita sudah membuat fungsi renderError() pada ClubList, maka penggunaanya cukup dilakukan seperti ini:
const fallbackResult = message =>{
clubListElement.renderError(message);
};
Karena kita menggunakan elemen pada berkas main.js, maka kita perlu melakukan impor berkas club-list.js pada berkas main.js.
import'../component/club-list.js';
Dengan begitu keseluruhan kode pada berkas main.js akan tampak seperti berikut:
const result =awaitDataSource.searchClub(searchElement.value);
renderResult(result);
}catch(message){
fallbackResult(message)
}
};
const renderResult = results =>{
clubListElement.clubs = results;
};
const fallbackResult = message =>{
clubListElement.renderError(message);
};
searchElement.clickEvent = onButtonSearchClicked;
};
exportdefault main;
Sekarang kita coba buka proyeknya menggunakan local server lalu tekan tombol pencarian. Voila, inilah tampilan hasilnya:
Ops, tampilan daftar club tampak berantakan. Kita perlu menyesuaikan styling-nya juga. Jadi silakan buka berkas src -> style -> clublist.css. Kemudian ubah seluruh selector #clubList menjadi club-list dan selector .club menjadi club-item.
club-list {
margin-top:32px;
width:100%;
padding:16px;
}
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;
}
club-item {
margin-bottom:18px;
box-shadow:04px8px0 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 */
}
Kemudian tambahkan juga properti display dengan nilai block pada selector club-list dan club-item.
club-list {
display: block;
….
}
….
club-item {
display: block;
….
}
….
Sehingga keseluruhan kode pada berkas clublist.css akan tampak seperti ini:
club-list {
display: block;
margin-top:32px;
width:100%;
padding:16px;
}
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;
}
club-item {
display: block;
margin-bottom:18px;
box-shadow:04px8px0 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 */
}
Sekarang kita coba buka kembali proyek club finder dengan menggunakan local server. Seharusnya kini semuanya sudah berjalan dengan baik.
Langkah dari ketiga solution ini bisa Anda temukan juga pada repository berikut:
Kita mulai dari 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:
classAppBarextendsHTMLElement{
constructor(){
super();
this.shadowDOM =this.attachShadow({mode:"open"});
}
connectedCallback(){
this.render();
}
render(){
this.innerHTML =`
Club Finder
`;
}
}
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.
classAppBarextendsHTMLElement{
constructor(){
super();
this.shadowDOM =this.attachShadow({mode:"open"});
}
connectedCallback(){
this.render();
}
render(){
this.shadowDOM.innerHTML =`
Club Finder
`;
}
}
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:04px8px0 rgba(0,0,0,0.2);
}
Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element tepat sebelum element pada fungsi render() di berkas app-bar.js seperti ini:
classAppBarextendsHTMLElement{
constructor(){
super();
this.shadowDOM =this.attachShadow({mode:"open"});
}
connectedCallback(){
this.render();
}
render(){
this.shadowDOM.innerHTML =`
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);
}
Club Finder
`;
}
}
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 tampak berantakan. Untuk menanganinya, kita perlu menyesuaikan kembali style yang diterapkan pada custom element menjadi seperti ini:
classAppBarextendsHTMLElement{
constructor(){
super();
this.shadowDOM =this.attachShadow({mode:"open"});
}
connectedCallback(){
this.render();
}
render(){
this.shadowDOM.innerHTML =`
* {
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;
}
Club Finder
`;
}
}
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 .
Setelah melakukan perubahan tersebut simpan (save) kembali perubahannya dan lihat hasilnya pada browser, seharusnya 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:32pxauto;
}
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.
Kemudian buka berkas src -> styles -> searchbar.css, pindahkan (cut) seluruh kode yang terdapat pada berkas tersebut.
.search-container {
max-width:800px;
box-shadow:04px8px0 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 tepat sebelum element
pada fungsi render() di berkas search-bar.js seperti ini:
classSearchBarextendsHTMLElement{
.........
render(){
this.shadowDOM.innerHTML =`
.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%;
}
}
Search
`;
.......
}
}
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:32pxauto;
}
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.
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 tepat sebelum element fungsi renderError() di berkas club-list.js seperti ini:
import'./club-item.js';
classClubListextendsHTMLElement{
.........
renderError(message){
this.shadowDOM.innerHTML =`
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;
}
`;
this.shadowDOM.innerHTML +=`
${message}
`;
}
.......
}
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:
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.
classClubItemextendsHTMLElement{
constructor(){
super();
this.shadowDOM =this.attachShadow({mode:"open"});
}
set club(club){
this._club = club;
this.render();
}
render(){
this.innerHTML =`
${this._club.name}
${this._club.description}
`;
}
}
customElements.define("club-item",ClubItem);
Seperti biasa jangan lupa untuk mengubah this.innerHTML menjadi this.shadowDOM.innerHTML ya.
classClubItemextendsHTMLElement{
constructor(){
super();
this.shadowDOM =this.attachShadow({mode:"open"});
}
set club(club){
this._club = club;
this.render();
}
render(){
this.shadowDOM.innerHTML =`
${this._club.name}
${this._club.description}
`;
}
}
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:04px8px0 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 tepat sebelum element pada fungsi render() di berkas club-item.js seperti ini:
classClubItemextendsHTMLElement{
.......
render(){
this.shadowDOM.innerHTML =`
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 */
}
${this._club.name}
${this._club.description}
`;
}
}
......
Sesuaikan kembali selector pada styling tersebut menjadi seperti ini:
classClubItemextendsHTMLElement{
.....
render(){
this.shadowDOM.innerHTML =`
* {
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 */
}
${this._club.name}
${this._club.description}
`;
}
}
........
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:32pxauto;
}
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!
Site Title 