Slide DevCoach

DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component

Transcript

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 • Ada apa dengan Lit • Lit vs Native Web Component • Apa itu reactive property • Gaya baru terapkan style dan event • Cara pasang Lit di Proyek 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