Web components allow developers to create reusable custom elements that encapsulate their functionality and styles. They utilize existing web standards like custom elements, shadow DOM, and HTML templates to define new DOM elements. Using web components provides benefits like reusability, maintainability, and encapsulation. While support across frameworks is improving, web components can also be used alongside frameworks.

1. Why use web components?
Fellyph Cintra
Solutions Engineer
Deloitte Digital
!1

2. @Fellyph
!2

3. !3
Call for Speakers: https://2019.dublin.wordcamp.org/call-for-speakers/
Speakers Application
until 20th August

4. Web Components
!4

5. Web Components
• It is a set of four specs from Web API.
• Web components creates custom and reusable
elements natively
!5

6. Benefits?
!6

7. !7
Reusability Maintainability Encapsulation

8. But…
!8

9. Web components + frameworks
!9https://custom-elements-everywhere.com/

10. JavaScript frameworks support
!10
100% 100% 71%91%
https://custom-elements-everywhere.com/

11. Motivation
!11

12. Support
!12
end of 2018

13. header
Menu User
dropdown
card Sidebar card
card
Footer
header
User
dropdown
card
card
Footer
!13
header
cardSidebar card
card
Footer
Cross application

14. Design system
!14

15. How it works
!15

16. Fantastic 4
!16
Custom
Elements
Shadow
DOM
ES modules
HTML
Templates
+

17. ● The specification allows us to create new types of
DOM elements, where we have two types:
○ Autonomous elements where the entire definition
created by the developer
○ Customised element when the new element
extends from a Default HTML element
!17
Custom Elements

18. ● Independent DOM tree that provides encapsulation.
● Keeps the markup in a different layer, to keep the code
clean.
● Needs extra attention with cross-functionality Light
DOM X Shadow DOM
!18
Shadow DOM

19. HTML Templates
● Permits to create reusable HTML template without
rendering them.
● Images won't load until we attach the template on the
DOM.
!19

20. code time!
!20

21. Objective
!21

22. !22
Style

23. !23
Future
https://github.com/w3c/webcomponents/issues/759

24. !24
Template

25. !25
Constructor

26. !26
Our component: Attributes

27. !27
Our component: Listening attributes

28. !28
Almost done

29. !29
Creating custom element

30. !30
My Gutenberg block

31. !31

32. Can we make it simple?
!32

33. https://lit-element.polymer-project.org/
!33

34. !34
lit-element

35. Where can I learn more?
!35

36. webcomponents.org
!36

37. Web fundamentals
!37https://developers.google.com/web/fundamentals/web-components/

38. Developer Guide
!38
https://open-wc.org/

39. Obrigado
Thank you
!39

40. @fellyph
!40
https://github.com/fellyph/wcbrighton2019