custom-elements-support

What problem does it solve?

Integrating Web Components (Custom Elements) with React has historically required workarounds, making interoperability difficult and adding boilerplate. React 19 introduces full, native support.

Core Features & Use Cases

• Automatic Property Detection: React 19 automatically determines whether to pass data as a property or an attribute to custom elements.
• Custom Event Support: Handle custom events from Web Components using the standard on + EventName convention.
• Simplified Prop Passing: Pass props directly to custom elements without ref workarounds.
• Boolean Attributes: Correctly handles boolean attributes (added/removed as needed).
• Use Case: Integrate a third-party mwc-button Web Component into a React 19 application, ensuring properties like label and icon are passed correctly and its onClick event is handled natively.

Quick Start

Integrate the web-counter custom element into src/App.js, passing increment and isDark props and handling the onIncremented event.