3. 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
4. Ada berapa total elemen dalam HTML standard?
Front-End Web
50?
20?
25?
40?
5. 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
8. 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
31. 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
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.