The document discusses web components as a W3C standard for building reusable UI components. It describes how web components use custom elements, HTML templates, and shadow DOM to create encapsulated components that can be used across different frameworks and browsers. It provides an overview of how to create a basic custom element and handle its lifecycle, properties, attributes, events, and shadow DOM encapsulation. It also covers browser support and polyfills for web components.

1. Web components
THE FUTURE HAS COME
GDG DevFest
Pisa 2019
Andrea Chiarelli
Pisa. April 13, 2019

2. About me
Andrea Chiarelli
Web Developer and Author
https://twitter.com/andychiarehttps://andreachiarelli.it

3. Decompose a User Interface

4. Decompose a User Interface

5. UI libraries and frameworks

6. Challenge
A UI component that…
…is efficient and reusable
…works in any Web page, regardless the UI
framework you use
…works with no dependency on third party library
…works in any recent browser
WC

7. Web components
W3C Standard Technology
 Custom elements
 HTML templates
 Shadow DOM

8. Using a Web
component

9. Using a Web component

10. Using a Web component

11. Managing with JavaScript

12. Creating
custom
elements

13. Web component at work

14. A basic custom element

15. Custom element reactions
 connectedCallback()
 disconnectedCallback()
 attributeChangedCallback()
 adoptedCallback()

16. Adding markup and style

17. Properties

18. Handling attributes

19. Handling events

20. Handling events

21. No encapsulation? No component

22. The shadow
DOM

23. The shadow DOM

24. The shadow DOM

25. The shadow DOM

26. Extending the
Web
components

27. Extending existing Web components

28. Extending native HTML elements

29. Browsers
support

30. Browsers compatibility
https://caniuse.com

31. Web component polyfills
https://github.com/WebComponents/webcomponentsjs

32. References
Cookie alert example
https://github.com/andychiare/simple-cookie-alert-component
https://www.webcomponents.org/
https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://www.html.it/guide/guida-ai-web-components

33. Question time
https://twitter.com/andychiare