Web Components Q&A

on YouTube ↗16m

" summary

React 19 adds web component support and until then expect two gotchas: React 18 doesn’t forward custom events and Boolean attributes behave oddly. Lit Labs react is usable to wrap components, and lit gives local reactivity by syncing properties and re-rendering only changed parts. Shadow DOM hides internals so accessibility needs deliberate work (common workaround: put native inputs in the light DOM). Server-side rendering and framework integration remain partial, but teams report success migrating legacy widgets by wrapping them as web components. React 19 adds web component support lit-labs/react bridges gaps

AI-written summary · about

" chapters (9)

1. 0:00Q&A
2. 0:34Web components in React apps
3. 2:27Accessibility with custom elements
4. 4:39Web components vs Next.js
5. 7:27Convincing management to adopt
6. 8:55Drawbacks of web components
7. 10:59Migrating with web components
8. 12:44Reactivity in web components
9. 14:54Passing complex data to components

" related talks

• 25mReact x Web Components : How It Is and How It Could BeDwane Hemmings · JSConf Korea 2022
• 20mI’m With Web Components and Web Components Are With MeGil Fink · ReactNext 2019
• 26mThe complementarity of React and Web ComponentsAndrew Rota · React.js Conf 2015
• 15mReact X Web Components: How it is and how it could beDwane Hemmings · React Conference Live 2022
• 45mReact Web Components How It Is and How It Could BeDwane Hemmings · Connect.Tech 2022
• 49mSupporting accessibility in React: the difficulties and nicetiesDiane Koh · axe-con 2023
• 59mReact in 2024: Exploring the New StuffCory House · Connect.Tech 2024
• 46mHow to Befriend Web Components and JS FrameworksRoman Troitskiy · HolyJS 2024 Spring