Remix clone Hacker News

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

▲

aquariusDue 9 days ago | parent | next [-]

I've had a good experience so far working on an admin dashboard with BeerCSS (and Datastar which is unrelated). It implements a lot of the Material Design stuff and it is opinionated but between the examples on the main site and documentation on GitHub it was pleasant to work with. It's easy to get started too, just add three links in the <head>.

https://github.com/beercss/beercss

https://www.beercss.com/

▲

spankalee 9 days ago | parent | prev | next [-]

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/

▲

Spone 9 days ago | parent | next [-]

Sadly Shoelace doesn't play well with Rails' FormBuilder...

▲

troupo 9 days ago | parent | prev [-]

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...

▲

troupo 9 days ago | parent [-]

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.

▲

spankalee 9 days ago | parent [-]

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.

	▲	troupo 9 days ago \| parent [-]
		Note that we're talking about embedding them in a Rails app. - all SSRed custom components are framework/library specific and cannot be rendered outside of javascript runtimes - you need a JS call to initialize each custom component (though this is likely provided by the bundled JS) - since when providing an id in a server-rendered HTML become an insurmountable challenge? - and they have many additional issues. Example in the sibling comment: https://news.ycombinator.com/item?id=43641081 > Anyway, you have an axe to grind, I don't have an axe to grind. I correct the magical wishful thinking that exists around custom components

▲

9 days ago | parent | prev [-]

[deleted]