supporting-custom-elements

Web Components work with React 19 through automatic property versus attribute handling and standard event conventions. React 19 infers whether to pass data as props or attributes, and custom events use onEventName handlers without requiring ref workarounds.

Custom events from Web Components dispatch through onEventName conventions in React 19. Wire event handlers directly to the custom element; React automatically detects and binds events without manual event listener setup.

React 19 automatically detects whether data should be set as a property or attribute on custom elements. Boolean attributes are handled correctly, and props pass directly without requiring manual ref-based workarounds.

Migrating from React 18 to React 19 simplifies Web Component integration by removing workarounds. React 19 handles property detection and event wiring automatically in both SSR and CSR contexts, eliminating manual ref patterns.

Custom elements must be defined before use in your React 19 component. Ensure you understand the element's API, event names, and expected prop types; React 19 handles the integration automatically once elements are registered.

Web Components work in both SSR and CSR contexts with React 19, though SSR may require client-only component patterns for elements without server-side support. React 19 applies consistent property and event handling across both rendering modes.