Intermediate LevelReact JS & React 19
How does React 19 improve interoperability with custom Web Components?
❓ Interview Prompt: Explain React 19 Custom Elements support, passing properties vs attributes, native custom event listeners, and Web Components.
Before React 19, using custom Web Components (Custom Elements) required complex 'useRef' workarounds because React treated all non-standard props as DOM attributes (strings) and could not attach custom event listeners natively.
React 19 Web Component Enhancements:
1
Properties & Attributes: Intelligently determines whether to pass props as primitive DOM attributes or complex JS object properties.
2
Native Custom Event Listeners: Attach event handlers to custom events directly in JSX ('onCustomEvent={handleEvent}')!
Code Implementation Example
jsx
// React 19: Native Web Component integration!
function WebComponentWidget() {
const handleCustomEvent = (e) => console.log('Custom Event:', e.detail);
return (
// React 19 handles complex object properties AND custom event listeners natively!
<my-custom-slider
min={0}
max={100}
config={{ theme: 'dark' }}
onSliderChange={handleCustomEvent}
/>
);
}💡Passing properties and custom event listeners to Web Components natively in React 19.
🎯 Interview Key Takeaway
React 19 seamlessly integrates with custom Web Components, supporting properties and custom event listeners directly in JSX.
#React 19#Web Components#Custom Elements#Intermediate
Back to all React JS & React 19 Questions→