Design System Options for Rails

It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.

It's not just that many design systems are tied to a particular framework, it's that they don't play well with HTML, and therefore classically server-rendering frameworks like Rails, Django, PHP, etc.

With custom elements you can just drop `<my-dropdown>` in your server template and that's where the dropdown widget will be.

Something like Shoelace[1] would be very nice to use with Rails.

[1]: https://shoelace.style/

Custom Elements don't play well with HTML either. And "just dropping <my-dropdown>" is not much different from "just dropping <div id=app> and running some framework code on it"

All the reasons are here: https://dev.to/stuffbreaker/web-components-and-ssr-2024-edit...

It's strange to see people downvoting this when custom elements still can't be properly rendered on the server. All the attempts are very framework specific, e.g. lit's list of caveats https://lit.dev/docs/ssr/overview/ (and shoelace referenced above depends on lit).

There's nothing very special in sending a html tag and then attaching functionality to it with javascript when it's loaded in the browser.

Framework server rendering is framework specific... Seems like a framework problem.

At least custom elements can just be including in framework-specific templates and be included in the rendered output, even if not deeply server-rendered.

It's actually very difficult to do this correctly and at scale with a framework like React, because in React you need an ID and JS call to initialize each embedded component, when custom elements initialize themselves.

Anyway, you have an axe to grind, so have fun with that. I'll see you next time I make a positive comment about web components I guess.