4. 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
5. Agenda
● Apa itu Web Component beserta tujuannya
● Dasar pembuatan Web Component
○ Sudah termasuk styling
● Custom attribute di Web Component
● Shadow DOM di Web Component
● Render light DOM dalam Web Component
Front-End Web
6. Ada berapa total elemen dalam HTML standard?
Front-End Web
50?
20?
25?
40?
7. 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
10. 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
33. 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