Web Components interoperability

Summary

React historically mismatched props vs attributes on custom elements — use property setters or @lit/react wrappers. Events may need lowercase native listeners. SSR custom elements needs declarative shadow DOM or hydration libs. Test form participation and focus management.

Code example

function UserBadge({ userId }) {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    el.userId = userId; // set property, not attribute
  }, [userId]);

  return <user-badge ref={ref} />;
}

Key points

• React historically mismatched props vs attributes on custom elements — use property setters or @lit/react wrappers.
• Events may need lowercase native listeners.
• SSR custom elements needs declarative shadow DOM or hydration libs.
• Test form participation and focus management.

Further reading

• Custom elements in React
• Web components

Related concepts

• Custom Elements lifecycle
• IntersectionObserver internals