Web components THE FUTURE HAS COME Andrea Chiarelli About me - - PowerPoint PPT Presentation

▶
web components
SMART_READER_LITE
LIVE PREVIEW

Web components THE FUTURE HAS COME Andrea Chiarelli About me - - PowerPoint PPT Presentation

Oct 17, 2023 354 likes •741 views

Montacchiello Developers Web components THE FUTURE HAS COME Andrea Chiarelli About me Andrea Chiarelli Web Developer and Author https://andreachiarelli.it https://twitter.com/andychiare Decompose a User Interface Decompose a User Interface

slide-1
SLIDE 1

Web components

THE FUTURE HAS COME

Andrea Chiarelli Montacchiello Developers

slide-2
SLIDE 2

About me

Andrea Chiarelli

Web Developer and Author https://twitter.com/andychiare https://andreachiarelli.it

slide-3
SLIDE 3

Decompose a User Interface

slide-4
SLIDE 4

Decompose a User Interface

slide-5
SLIDE 5

UI libraries and frameworks

slide-6
SLIDE 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

slide-7
SLIDE 7

Web components

W3C Standard Technology ❑ Custom elements ❑ HTML templates ❑ Shadow DOM

slide-8
SLIDE 8

Using a Web component

slide-9
SLIDE 9

Using a Web component

slide-10
SLIDE 10

Using a Web component

slide-11
SLIDE 11

Managing with JavaScript

slide-12
SLIDE 12

Creating custom elements

slide-13
SLIDE 13

Web component at work

slide-14
SLIDE 14

A basic custom element

slide-15
SLIDE 15

Custom element reactions

❑ connectedCallback() ❑ disconnectedCallback() ❑ attributeChangedCallback() ❑ adoptedCallback()

slide-16
SLIDE 16

Adding markup and style

slide-17
SLIDE 17

Properties

slide-18
SLIDE 18

Handling attributes

slide-19
SLIDE 19

Handling events

slide-20
SLIDE 20

Handling events

slide-21
SLIDE 21

No encapsulation? No component

slide-22
SLIDE 22

The shadow DOM

slide-23
SLIDE 23

The shadow DOM

slide-24
SLIDE 24

The shadow DOM

slide-25
SLIDE 25

The shadow DOM

slide-26
SLIDE 26

Extending the Web components

slide-27
SLIDE 27

Extending existing Web components

slide-28
SLIDE 28

Extending native HTML elements

slide-29
SLIDE 29

Web components everywhere

slide-30
SLIDE 30

Using in React applications

slide-31
SLIDE 31

Using in Angular applications

slide-32
SLIDE 32

Browsers support

slide-33
SLIDE 33

Browsers compatibility

https://caniuse.com

slide-34
SLIDE 34

Web component polyfills

https://github.com/WebComponents/webcomponentsjs

slide-35
SLIDE 35

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

slide-36
SLIDE 36

Question time

https://twitter.com/andychiare