The
(Real)
State of
Web
Components
Martin Hochel
@martin_hotell
USE THE
PLATFORM
Slide 2
Slide 2 text
Martin Hochel
Principal Engineer @Productboard,
GDE WEB, Microsoft MVP
Prague / Czech Republic
@martin_hotell
medium.com/@martin_hotell
github.com/hotell
Slide 3
Slide 3 text
Disclaimer
I might be biased...
Former core member of skateJS ❤
Used WebComponents in production
Slide 4
Slide 4 text
Meanwhile on the internet
"Web Components will replace your
frontend framework"
Slide 5
Slide 5 text
Meanwhile on the internet
"2018 - the year of Web Components"
Slide 6
Slide 6 text
WebComponents everywhere?
https://www.chromestatus.com/metrics/feature/timeline/popularity/1689
6% of all pages today use Web
Components
Slide 7
Slide 7 text
WebComponents everywhere?
Can I use WebComponents?
https://caniuse.com/#feat=custom-elementsv1
https://caniuse.com/#feat=shadowdomv1
Slide 8
Slide 8 text
Why Web Components ?
Slide 9
Slide 9 text
Let's write
a WebComponent
Slide 10
Slide 10 text
Live coding
Slide 11
Slide 11 text
Check it out on Github
Slide 12
Slide 12 text
web component
Slide 13
Slide 13 text
Web Components Pros & Cons
✅ Encapsulation
✅ Composition
✅ Themability
✅ Plug and Play
✅ ZERO runtime
✅ Interop with frameworks
❌ Global namespace
❌ Progressive enhancement
❌ A11Y
❌ DX (Developer experience)
❌ SVG
❌ Forms
❌ server side rendering
❌ ...other issues
PROS CONS
Slide 14
Slide 14 text
Let's talk about the cons a bit
Slide 15
Slide 15 text
Global namespace
Slide 16
Slide 16 text
Global namespace
Proposal for namespaced registry
Slide 17
Slide 17 text
Progressive Enhancement
&
Accessibility
Slide 18
Slide 18 text
Progressive enhancement/A11Y
autonomous custom elements
❌ Progressive enhancement
❌ A11Y
Slide 19
Slide 19 text
Progressive enhancement/A11Y
customized built-in elements
✅ Progressive enhancement
✅ A11Y
Slide 20
Slide 20 text
Progressive enhancement/A11Y
Safari supports "Autonomous custom elements" but
NOT "Customized built-in
elements".
Slide 21
Slide 21 text
DX (Developer Experience)
Slide 22
Slide 22 text
DX
"To author Web Components you'll need a library"
Martin Hochel, revojs 2019
Slide 23
Slide 23 text
So what's the problem with using a
library ?
Slide 24
Slide 24 text
You need to learn another framework
… ehm I meant library ofc !
Slide 25
Slide 25 text
Web Components = ZERO runtime ?
Slide 26
Slide 26 text
Web Components + library = zero runtime ?
haunted
lit-element
x-tag
Slide 27
Slide 27 text
Web Components + library = zero runtime ?
lit-element
v1
lit-element
v2
haunted v2 haunted v1
x-tag v1 x-tag v2
6 Web Components
=
libraries 37.4 kB
+
Implementation
Slide 28
Slide 28 text
SVG
Slide 29
Slide 29 text
SVG
You can't use Web Components
to encapsulate parts of an SVG.
Whole twitter thread
WHY?
SVG has a separate namespace - so everything outside the namespace is
ignored.
Slide 30
Slide 30 text
Forms
Slide 31
Slide 31 text
Forms
- Broken standard submit
- Broken form autofill
- Broken a11y (aria-labelledby)
- shadow trees introduce boundaries for ID's
Read the full proposal document
Slide 32
Slide 32 text
Server Side Rendering
Slide 33
Slide 33 text
Server Side rendering
- Declarative Shadow Dom
DECLINED
Slide 34
Slide 34 text
Server Side rendering
- You'll need to build your own pipeline
- Puppeteer
- @skate/ssr
More info
Slide 35
Slide 35 text
Everything that Web Components
try to solve
is already solved today
Slide 36
Slide 36 text
State of Components without Web Components
✅ Encapsulation
✅ Themability
✅ Declarative component model
✅ Great DX
✅ SVG
✅ Server Side rendering
✅ Interop *
✅ Small/ZERO runtime
Preact Svelte
Slide 37
Slide 37 text
Should we ditch Web Components?
Slide 38
Slide 38 text
No !
They are here to stay!
as will React, Angular, Vue ...
Slide 39
Slide 39 text
Should we learn Web Components?
Slide 40
Slide 40 text
Sure, Why not !
Slide 41
Slide 41 text
Should we use Web Components?
Slide 42
Slide 42 text
Depends/Maybe
Slide 43
Slide 43 text
When should we use Web Components
✅ Design system (if you need to support teams with various stacks)
✅ Plugins (Wordpress, Server Rendered pages)
✅ Micro Frontends
✅ Migration Purposes (AngularJS to Angular)
Slide 44
Slide 44 text
How should we author Web Components
1. Use your framework ✅
2. Consider Stencil ✅
3. Use raw WC if you have the skill
1001001
compile
1001001
compile
Slide 45
Slide 45 text
♀ Summary
Slide 46
Slide 46 text
"Web Components will replace your
frontend framework"
MYTH !