Live Coding: Learning Web Components
The video covers a workshop on web components, exploring their concepts, implementation, and how to integrate them with React applications. The speaker shares their experiences, challenges, and solutions found while learning about custom elements, shadow DOM, and attributes.
Watch on YouTube
The video covers a workshop on web components, exploring their concepts, implementation, and how to integrate them with React applications. The speaker shares their experiences, challenges, and solutions found while learning about custom elements, shadow DOM, and attributes.
Transcript
Started with a recap of the workshop attended at Tech Bash on web components, with an introduction to the presenters Chris and John. The speaker initially had doubts about web components but was encouraged to explore them further.
Highlights from the workshop are shared, covering the evolution, ease of use, and browser support for web components, including the importance of custom elements and shadow DOM.
The speaker dives into MDN documentation to explain concepts like custom elements and shadow DOM, highlighting how they improve performance by minimizing direct DOM manipulation.
A demonstration begins, with the speaker creating a web component for the contact details of a React application. They detail the coding process using TypeScript, touch upon polyfills for older browser support, and acknowledge the benefits of shadow DOM.
Integration challenges arise when trying to use the custom web component within React, with TypeScript errors indicating that custom elements need to be defined in intrinsic elements.
After a series of trials, including creating a wrapper for the web component, the speaker succeeds in passing props to the custom element and explains how properties on web components can handle complex objects.
Reiterating that this experience was a learning process, the speaker wraps up with a summary of the key points covered in the session, emphasizing the advantages of web components and their integration into React.
Finally, the speaker invites viewers to follow along for future streams and provides information about their social media.