SlideShare une entreprise Scribd logo
1  sur  35
Position
Bikin Elemen HTML Sendiri
dengan Web Component
Front-End Web
Nur Rizki Adi
Curriculum Developer
Learning Objectives
● Menjelaskan apa itu Web Component.
● Menjelaskan cara membuat dan menampilkan custom element.
● Menunjukkan penanganan custom attribute untuk custom element.
● Menunjukkan pentingnya shadow DOM bagi custom element.
● Mengidentifikasi penerapan nested element pada custom element.
Front-End Web
Ada berapa total elemen dalam HTML standard?
Front-End Web
50?
20?
25?
40?
Main root Image and multimedia Forms
Document metadata Embedded content Interactive elements
Sectioning root SVG and MathML Web Components
Content sectioning Scripting Obsolete and deprecated
elements
Text content Demarcating edits
Inline text semantics Table content
HTML elements reference - MDN
HTML Elements by Categories
Masih belum cukup dengan elemen
HTML yang ada?
Web Component ✨
Apa Itu
Web Component
Front-End Web
Apa Itu Web Component
●Sekumpulan teknologi yang ditetapkan
standar W3C untuk membuat custom
element yang reusable.
●Fitur ini memudahkan developer dalam
kustomisasi komponen UI dan menjadi
lebih modular.
Front-End Web
Sport Club Finder App
<search-bar>
<club-list>
<footer-app>
<app-bar>
Framework yang Mengadopsi
Component Architecture
Front-End Web
Tiga Teknologi
Web Component
● Custom Element
● Shadow DOM
● HTML Template
Front-End Web
Cara Bikin
Elemen HTML
Front-End Web
Dua Cara Bikin
Element HTML
Front-End Web
CustomElementRegistry - MDN
Sediakan Konten
Front-End Web
Bagaimana dengan Attribute?
getAttribute('color')
getAttribute('size')
Bagaimana dengan Attribute?
Pentingnya
Shadow DOM
Front-End Web
Penting untuk Paham Dulu!
● Object dan Node (Tree)
● Enkapsulasi
Front-End Web
Enkapsulasi Custom Element
dengan Shadow DOM
Front-End Web
Render Light DOM dalam
Web Component
Front-End Web
Cara Kerja Slot Element
Conclusion
Front-End Web
Front-End Web
Benefit apa lagi
selain reusable?
Benefit Lain
● Web Component adalah standar yang ditetapkan
oleh W3C dalam membuat komponen yang reusable.
● Karena merupakan standar HTML, Web Component
juga dapat dipakai pada framework apa pun.
● Penggunaan Web Component tidak memerlukan
konfigurasi khusus layaknya framework yang ada.
Front-End Web
Powerful Library for Building Web Component Standard
Thank You
nurrizkiadip
Nur Rizki Adi Prasetyo
@NAdiPrasetyo
nrizki@dicoding.com
Nur Rizki Adi Prasetyo
Nur Rizki Adi Prasetyo
Front-End Web
Feedback!
Hadiah:
● 2 Token Langganan Academy (30 Hari)
*untuk pengisi feedback terpilih!
dicoding.id/devcoachfeedback
Front-end Web

Contenu connexe

Similaire à DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component.pptx

Rekayasa Web - CodeIgniter Framework, PrestaShop & Magento Framework
Rekayasa Web - CodeIgniter Framework, PrestaShop & Magento FrameworkRekayasa Web - CodeIgniter Framework, PrestaShop & Magento Framework
Rekayasa Web - CodeIgniter Framework, PrestaShop & Magento FrameworkToni Eko Saputro
 
Modul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarModul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarRidwan Fadjar
 
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLKuliahKita
 
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekYan Bali
 
Aitindo Sharing Session
Aitindo Sharing SessionAitindo Sharing Session
Aitindo Sharing SessionSandi Rosyandi
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt044249
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfBeon Intermedia
 
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniterMembangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniterBeni Krisbiantoro
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]trya nita
 
Modul dreamweaver dasar
Modul dreamweaver dasarModul dreamweaver dasar
Modul dreamweaver dasaragus salim
 
Tugas 1 ihsan riadi - 1412511162
Tugas 1   ihsan riadi - 1412511162Tugas 1   ihsan riadi - 1412511162
Tugas 1 ihsan riadi - 1412511162ihsan riadi
 
Tugas 1 0317 individu
Tugas 1 0317 individuTugas 1 0317 individu
Tugas 1 0317 individueko nofrianto
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)RiaWahyuni5
 
Codeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur FitriyaniCodeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur FitriyaniAnnisa Nur Fitriyani
 

Similaire à DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component.pptx (20)

Rekayasa Web - CodeIgniter Framework, PrestaShop & Magento Framework
Rekayasa Web - CodeIgniter Framework, PrestaShop & Magento FrameworkRekayasa Web - CodeIgniter Framework, PrestaShop & Magento Framework
Rekayasa Web - CodeIgniter Framework, PrestaShop & Magento Framework
 
Modul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarModul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter Dasar
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTML
 
Hml5 ppt
Hml5 pptHml5 ppt
Hml5 ppt
 
Bahan ajar web1
Bahan ajar web1Bahan ajar web1
Bahan ajar web1
 
Bab 1 Teknologi Web
Bab 1   Teknologi WebBab 1   Teknologi Web
Bab 1 Teknologi Web
 
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyek
 
Tugas 4 rekayasa web (0916)
Tugas 4   rekayasa web (0916)Tugas 4   rekayasa web (0916)
Tugas 4 rekayasa web (0916)
 
Aitindo Sharing Session
Aitindo Sharing SessionAitindo Sharing Session
Aitindo Sharing Session
 
Review Udemy Course #1
Review Udemy Course #1Review Udemy Course #1
Review Udemy Course #1
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
 
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniterMembangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]
 
Modul dreamweaver dasar
Modul dreamweaver dasarModul dreamweaver dasar
Modul dreamweaver dasar
 
Tugas 1 ihsan riadi - 1412511162
Tugas 1   ihsan riadi - 1412511162Tugas 1   ihsan riadi - 1412511162
Tugas 1 ihsan riadi - 1412511162
 
Tugas 1 0317 individu
Tugas 1 0317 individuTugas 1 0317 individu
Tugas 1 0317 individu
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)
 
Codeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur FitriyaniCodeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur Fitriyani
 

Plus de shabilla6

Developer Coaching #132 Back-End | Menyimpan Berkas di REST API dengan Mudah
Developer Coaching #132 Back-End | Menyimpan Berkas di REST API dengan MudahDeveloper Coaching #132 Back-End | Menyimpan Berkas di REST API dengan Mudah
Developer Coaching #132 Back-End | Menyimpan Berkas di REST API dengan Mudahshabilla6
 
Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...
Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...
Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...shabilla6
 
Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...
Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...
Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...shabilla6
 
Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...
Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...
Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...shabilla6
 
Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...
Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...
Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...shabilla6
 
Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...
Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...
Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...shabilla6
 

Plus de shabilla6 (6)

Developer Coaching #132 Back-End | Menyimpan Berkas di REST API dengan Mudah
Developer Coaching #132 Back-End | Menyimpan Berkas di REST API dengan MudahDeveloper Coaching #132 Back-End | Menyimpan Berkas di REST API dengan Mudah
Developer Coaching #132 Back-End | Menyimpan Berkas di REST API dengan Mudah
 
Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...
Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...
Dicoding Developer Coaching #122 - Mengimplementasikan autentikasi dan otoris...
 
Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...
Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...
Dicoding Developer Coaching #121 _ iOS _ Membuat Aplikasi Berbasis List denga...
 
Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...
Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...
Dicoding Developer Coaching #120_ DevOps Engineer _ Pengembangan Aplikasi men...
 
Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...
Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...
Dicoding Developer Coaching #119 _ iOS _ MacinCloud, Bikin Aplikasi iOS tanpa...
 
Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...
Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...
Dicoding Developer Coaching #118 _ DevOps Engineer _ Tingkatkan Kualitas Kode...
 

Dernier

K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015
K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015
K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015IrfanAdiPratomo1
 
Petunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptx
Petunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptxPetunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptx
Petunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptxpkmcipakudrive
 
tugas pelaksana lapangan pekerjaan saluran irigasi
tugas pelaksana lapangan pekerjaan saluran irigasitugas pelaksana lapangan pekerjaan saluran irigasi
tugas pelaksana lapangan pekerjaan saluran irigasifrenkytanzil5
 
Electrostatic Precipitator handbook manual
Electrostatic Precipitator handbook manualElectrostatic Precipitator handbook manual
Electrostatic Precipitator handbook manualdendranov19
 
PPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptx
PPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptxPPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptx
PPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptxHeruHadiSaputro
 
ESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptx
ESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptxESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptx
ESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptxadnijayautama
 
Materi evaporasi untuk kuliah Teknik Kimia
Materi evaporasi untuk kuliah Teknik KimiaMateri evaporasi untuk kuliah Teknik Kimia
Materi evaporasi untuk kuliah Teknik KimiaadesaputraTanjung1
 
Jual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan Konsultasi
Jual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan KonsultasiJual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan Konsultasi
Jual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan Konsultasissupi412
 
Representation Description_computer_enginering.pptx
Representation Description_computer_enginering.pptxRepresentation Description_computer_enginering.pptx
Representation Description_computer_enginering.pptxKrinesca
 
Pelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman Madya
Pelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman MadyaPelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman Madya
Pelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman Madyadedekhendro370
 
Tanah bermasalah / Tanah Problematik.pdf
Tanah bermasalah / Tanah Problematik.pdfTanah bermasalah / Tanah Problematik.pdf
Tanah bermasalah / Tanah Problematik.pdfsmalaanto
 

Dernier (16)

Jual Obat Aborsi Denpasar Bali ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik...
Jual Obat Aborsi Denpasar Bali ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik...Jual Obat Aborsi Denpasar Bali ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik...
Jual Obat Aborsi Denpasar Bali ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik...
 
K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015
K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015
K3 INSTALASI PENYALUR PETIR PERMEN 31 TH 2015
 
obat aborsi Pangkal pinang Wa 082223109953 Jual obat aborsi Cytotec asli Di P...
obat aborsi Pangkal pinang Wa 082223109953 Jual obat aborsi Cytotec asli Di P...obat aborsi Pangkal pinang Wa 082223109953 Jual obat aborsi Cytotec asli Di P...
obat aborsi Pangkal pinang Wa 082223109953 Jual obat aborsi Cytotec asli Di P...
 
Jual Obat Aborsi Batam ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik Jual Ob...
Jual Obat Aborsi Batam ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik Jual Ob...Jual Obat Aborsi Batam ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik Jual Ob...
Jual Obat Aborsi Batam ( Asli Ampuh No.1 ) 082223109953 Tempat Klinik Jual Ob...
 
Petunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptx
Petunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptxPetunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptx
Petunjuk teknis Pengisian Usulan Alat Kesehatan SOPHI.pptx
 
tugas pelaksana lapangan pekerjaan saluran irigasi
tugas pelaksana lapangan pekerjaan saluran irigasitugas pelaksana lapangan pekerjaan saluran irigasi
tugas pelaksana lapangan pekerjaan saluran irigasi
 
Electrostatic Precipitator handbook manual
Electrostatic Precipitator handbook manualElectrostatic Precipitator handbook manual
Electrostatic Precipitator handbook manual
 
PPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptx
PPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptxPPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptx
PPT PELAKSANA LAPANGAN PERPIPAAN MADYA - IWAN SYAHRONI.pptx
 
ESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptx
ESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptxESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptx
ESTIMASI BIAYA PEMELIHARAAN BANGUNAN BERDASARKAN PEDOMAN PEMELIHARAAN DAN.pptx
 
Obat Aborsi jakarta WA 082223109953 Jual Obat Aborsi Cytotec Asli Di jakarta
Obat Aborsi jakarta WA 082223109953  Jual Obat Aborsi Cytotec Asli Di jakartaObat Aborsi jakarta WA 082223109953  Jual Obat Aborsi Cytotec Asli Di jakarta
Obat Aborsi jakarta WA 082223109953 Jual Obat Aborsi Cytotec Asli Di jakarta
 
Materi evaporasi untuk kuliah Teknik Kimia
Materi evaporasi untuk kuliah Teknik KimiaMateri evaporasi untuk kuliah Teknik Kimia
Materi evaporasi untuk kuliah Teknik Kimia
 
Obat Aborsi Sungai Penuh 082223109953 Jual Cytotec Asli Di Sungai Penuh
Obat Aborsi Sungai Penuh 082223109953 Jual Cytotec Asli Di Sungai PenuhObat Aborsi Sungai Penuh 082223109953 Jual Cytotec Asli Di Sungai Penuh
Obat Aborsi Sungai Penuh 082223109953 Jual Cytotec Asli Di Sungai Penuh
 
Jual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan Konsultasi
Jual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan KonsultasiJual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan Konsultasi
Jual Cytotec Di Batam Ori 👙082122229359👙Pusat Peluntur Kandungan Konsultasi
 
Representation Description_computer_enginering.pptx
Representation Description_computer_enginering.pptxRepresentation Description_computer_enginering.pptx
Representation Description_computer_enginering.pptx
 
Pelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman Madya
Pelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman MadyaPelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman Madya
Pelaksana Lapangan Pekerjaan Bangun air Limbah Permukiman Madya
 
Tanah bermasalah / Tanah Problematik.pdf
Tanah bermasalah / Tanah Problematik.pdfTanah bermasalah / Tanah Problematik.pdf
Tanah bermasalah / Tanah Problematik.pdf
 

DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component.pptx

Notes de l'éditeur

  1. Shadow host Komponen/node/elemen pada regular DOM (keumuman elemen) yang terdapat shadow DOM padanya. Kita bisa memiliki DOM sendiri yang terisolasi dari DOM utama. Shadow tree DOM tree di dalam shadow DOM. Kita bisa memiliki markup khusus dalam shadow tree layaknya menyusun markup biasanya. Shadow boundary Perbatasan antara shadow DOM dengan regular DOM. Shadow root Root node dari shadow tree. Ini bisa kita miripkan dengan <html> sebagai root dari dokumen utama HTML.