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

1. Position
Bikin Elemen HTML Sendiri
dengan Web Component
Front-End Web
Nur Rizki Adi
Curriculum Developer

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

6. Masih belum cukup dengan elemen
HTML yang ada?
Web Component ✨

7. Apa Itu
Web Component
Front-End Web

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

13. Sport Club Finder App

14. <search-bar>
<club-list>
<footer-app>
<app-bar>

15. Framework yang Mengadopsi
Component Architecture
Front-End Web

16. Tiga Teknologi
Web Component
● Custom Element
● Shadow DOM
● HTML Template
Front-End Web

17. Cara Bikin
Elemen HTML
Front-End Web

18. Dua Cara Bikin
Element HTML
Front-End Web
CustomElementRegistry - MDN

19. Sediakan Konten
Front-End Web

20. Bagaimana dengan Attribute?
getAttribute('color')
getAttribute('size')

21. Bagaimana dengan Attribute?

22. Pentingnya
Shadow DOM
Front-End Web

23. Penting untuk Paham Dulu!
● Object dan Node (Tree)
● Enkapsulasi
Front-End Web

24. Enkapsulasi Custom Element
dengan Shadow DOM
Front-End Web

27. Render Light DOM dalam
Web Component
Front-End Web

28. Cara Kerja Slot Element

29. Conclusion
Front-End Web

30. Front-End Web
Benefit apa lagi
selain reusable?

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

32. Powerful Library for Building Web Component Standard

33. Thank You
nurrizkiadip
Nur Rizki Adi Prasetyo
@NAdiPrasetyo
nrizki@dicoding.com
Nur Rizki Adi Prasetyo
Nur Rizki Adi Prasetyo
Front-End Web

34. Feedback!
Hadiah:
● 2 Token Langganan Academy (30 Hari)
*untuk pengisi feedback terpilih!
dicoding.id/devcoachfeedback

35. Front-end Web