The document discusses the advantages of using web components alongside different frameworks like Angular, Vue, and React, emphasizing interoperability and the ability to create reusable components. It covers technologies such as custom elements, shadow DOM, and the integration process within these frameworks, providing a comparative analysis of their support for web components. The conclusion highlights that while web components are beneficial, challenges remain, especially with React's support and the complexity of wrappers.

1. WEBCOMPONENTS ARE YOUR
FRAMEWORKS BEST FRIEND

2. @filipbech

3. colibo.com

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

8. WHY
• Interoperability - portability
• Native components brings us native performance
• Framework == implementation detail

10. ITS (FINALLY) HAPPENING…

11. SPECS
• custom elements
• shadow dom
• <template>
• es-modules

13. ATTRIBUTES VS PROPERTIES

16. CONTENT PROJECTION WITH SLOT

17. NAMED SLOTS

18. STYLING
• scoped to shadowRoot
• custom-properties
• special selectors - eg. :host, :slotted etc.
• ::parts on the horizon

19. WITH FRAMEWORKS

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/

23. ANGULAR

26. https://custom-elements-everywhere.com/

27. VUE

29. https://custom-elements-everywhere.com/

30. REACT

32. https://custom-elements-everywhere.com/

34. REACT 17 MAYBE?
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

35. https://twitter.com/dan_abramov/status/1135440680375873536

36. https://github.com/facebook/react/issues/11347

37. PREACT TO THE RESCUE..?

38. 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

41. YOUR COMPONENT
AS A CUSTOM-ELEMENT
the why, the how and all the details

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

43. HOW
• Native Webcomponent framework
• Wrap in custom-element

44. WRAPPING
• Element-properties for data
• Dom-events for events
• Slots
• Style encapsulation w. shadowDOM

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)

46. EXPORT TO WEBCOMPONENTS
• Angular (official)
• Vue (official)
• React (community)

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

49. @ANGULAR/ELEMENTS

54. NG-CONTENT OR <SLOT>

55. DISABLE NGZONE

56. RESULTS

57. ivy

58. ANGULAR 9 NEXT 16

59. IVY ELEMENTS
• Maybe with 9? Later?
• smaller, simpler, faster (~15kb)
• lazyNgElement
https://www.youtube.com/watch?v=JX5GGu_7JKc

60. @VUE/WEB-COMPONENT-
WRAPPER

65. BUILDING

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)

67. RESULTS

68. REACT

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

76. RESULTS

77. THE RESULTS ARE IN…
Angular Vue React
Consume 100 % 100 % 71 %
Wrap - features 😀 🙂 😕
Wrap - DX 🙂 🙂 😀
Wrap - bundlesize ~49kb ~36kb ~42kb

78. DO WE NEED FRAMEWORKS
can we use webcomponents alone?

79. USING WEBCOMPONENTS ALONE
• Sugar on top
• LitElement, Stencil, Svelte,
• Helpers below
• Utility-libraries for http, state-management, etc…
https://developers.google.com/web/fundamentals/web-components/best-practices

81. PLATFORM RESULTS
LitElement
Consume 100 %
All features 😀
Developer experience 😀
Wrap - bundlesize ~7kb

82. THE PLATFORM STILL HAVE SOME GAPS
• ::parts
• scoped registries
• import maps
• polyfilling is non-trivial

83. CONCLUSION

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