Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component.pdf

1. Dicoding Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore.
Front-End Web

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

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

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

9. Apa Itu
Web Component
Front-End Web

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

15. Sport Club Finder App

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

17. Framework yang Mengadopsi
Component Architecture
Front-End Web

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

19. Cara Bikin
Elemen HTML
Front-End Web

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

21. Sediakan Konten
Front-End Web

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

23. Bagaimana dengan Attribute?

24. Pentingnya
Shadow DOM
Front-End Web

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

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

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

30. Cara Kerja Slot Element

31. Conclusion
Front-End Web

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

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

34. Powerful Library for Building Web Component Standard

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

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

37. Front-end Web