supporting-custom-elements

Enable Web Components support in React 19 with property and event handling.

Updated Nov 21, 2025

Search Tags:#ui #react-19 #web-components #custom-elements

Ready to run

npx skills add https://github.com/djankies/claude-configs --skill supporting-custom-elements

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: supporting-custom-elements
Source: https://github.com/djankies/claude-configs/tree/main/react-19/skills/supporting-custom-elements
Command: npx skills add https://github.com/djankies/claude-configs --skill supporting-custom-elements

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill covers integrating Web Components with React 19, including property vs attribute handling and custom events.

Core Features & Use Cases

Property vs Attribute: Let React infer props vs attributes automatically.
Custom Events: Use onEventName conventions for dispatches.
** SSR/CSR Considerations**: Guidance for SSR and client-only components.

Quick Start

Use a custom element in a React 19 component and wire up a custom event with an onEvent handler.

Frequently Asked Questions about supporting-custom-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I use Web Components with React 19?▼

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.

How do I handle custom events from Web Components in React?▼

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.

What's the difference between properties and attributes when using custom elements in React?▼

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.

Can I migrate Web Component integration from React 18 to React 19?▼

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.

What do I need to know before integrating third-party custom elements?▼

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.

Does Web Component integration differ between server-side and client-side rendering?▼

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.