Phoenix is frontend pipeline agnostic. I’ve use it with webpack, snowpack, esbuild, Vite or no build step at all. Everything is possible; however, there may not be a step by step tutorial that match your needs exactly. IMHO, most tutorials off the internet are not very valuable; you are better off figuring it out on your own.

We use Shoelace with Phoenix. It’s working great, but you have to understand how web components works. Styling web components is different because they use Shadow DOM. Shoelace have a section in docs explaining that, but it’s general to all web components.

We do use it with LV. We did not hit this issue yet, also we’re not using Button component and we’re careful with attributes in general.

Everything has been working great so far. though it’s not that easy with LV. We build layer on top of Shoelace and our own web components. So, we have LV component wrapping Web Component and passing down the props, event handlers, etc. Then, we also add hooks for each components where we get passed down even names and add JS handlers for them or wire to Shoelace events. Or add event listeners for Shoelace events.

We did try GitHub - launchscout/live_elements: A library to make custom elements and LiveView so happy together · GitHub but decided to go on our own, to have more control over everything.

So far, web components (native custom elements) is the best thing (IMO) you can use for complex client-side UI in Phoenix.Mainly, because you slot html from phoenix inside and everything will just work. This is not possible with React and co, where you cant wrap some html from server with component - you have to pass everything through props, etc.