5. WRITE ONCE - USE
ANYWHERE
the promise of webcomponents
7. THIS TALK WILL BE
• Webcomponents - what and why
• How (basic tech intro)
• Using Webcomponents in your framework
• Your framework-component as a Web-component
20. HOW TO USE FROM WITHIN FRAMEWORKS
• angular
• vue
• react (preact)
22. COMPARING FEATURE-COMPLETENESS
• The tests checks that a framework supports the usage of custom elements
• Each test has an associated weight, based on how critical it is. The final tally of
pass/fails is combined with these weights to create a weighted average score.
• Testing in browsers with native support AND in old browser with polyfill
• All credit goes to @rob_dodson
https://custom-elements-everywhere.com/
40. SO…
• You can do it yourself
• Get a reference to the custom-element, and pass properties to it
• get a reference to the custom-element and addEventListener
42. WHY
• Interoperability
• Framework is an implementation detail
• The component-developer chooses their preferred tools
• Write a datepicker in React - use it in an Angular form
45. THE COMPARISON
• features
• css encapsulation
• slots
• properties (inputs)
• events (outputs)
• ease of use (for dev)
• size of bundle
• NOT framework integration (too hard to compare)
47. WHAT ARE WE BUILDING
• a custom-button component
• takes a label as a property
• Has a Slot for content
• counts clicks
• emits a custom event (“action”) when clicked
• contains an h1, and styles applied to h1
66. WITH VUE
• feels elegant and light
• e.detail is an array of additional arguments to $emit()
• Doesn’t handle styles => points to css-modules as the solution
• The bundle is tiny - but requires a global vue (cannot be tree-shaken)
69. REACT IS DIFFERENT
• Passing callbacks as props instead of custom events
• CSS-in-JS
70. REACT…
• no official wrapper
• react-web-component
• web-react-components
• @adobe/react-webcomponent
• skateJS
71. WEB-REACT-COMPONENTS
• Looks like the real deal - but also not maintained
• Register()-method to wrap and register
• props.children is a <slot>
• Hack styles with <style dangerouslySetInnerHTML…>
• Requires the polyfill as it ships es5 😒
https://github.com/ChristophP/web-react-components
84. CONCLUSION
• Webcomponents and your framework complement each other.
• Doable today, but still a little complicated and some missing features
• Vue and Angular are good in using webcomponents. React not so much atm
• The wrappers are pretty cool, but incomplete, large and/or complex
(and no official wrapper for react)
• <slot>’s don’t mix/match so well with framework-features
• Lets make this happen…
https://github.com/filipbech/framework-webcomponents
85. THANK YOU!
This was “webcomponents are your frameworks best friend”
Im @filipbech
Follow for slides