I wrote a short description of how to use HeadlessUI components with LiveView:

Tailored to HeadlessUI, but in fact not HeadlesUI specific, but applicable to React components in general.

Approach:

• React Component
• Wrapped in Web Component that handles server->client (attribute changes) and client-server (events) communication
• Rendered to light DOM (not shadow DOM, due to lacking HeadlessUI support)
• micro LiveView Hook with glue code push LiveView events to server

Pros:

• integrates well with minimal esbuild assets pipeline
• web component is a good interface boundary for LiveView / “custom” Javascript
• sprinkle minimal amounts of Javascript where necessary

Cons:

• use with caution, prefer LiveView Phoenix.LiveView.JS bindings where sufficient

Do you use similar techniques? What are your experiences?
Are there better ways of implementing this approach?