Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Tried Lit and StencilJS.

They are both forcing the usage of custom events to dispatch functions and share data between components. It's horribly unergonomic. Using the DOM with event bubbling and capturing feels really bad.

Orchestrating rendering is a mess.

The Shadow DOM and templates don't really solve any issues that aren't already solved with things like CSS modules for style scoping and even using element cloning is faster than templating.

The only thing they have going for it is that they're a nice way to share 3rd party components as an alternative to iframes or JS library API which targets a DOM node with a parameter.

And you can use any small framework like Preact, Svelte or SolidJS and wrap it with a web component.



So what do you do? Hand-craft Web Components?


I avoid using them, except when having to expose a component to a third party, if they _really_ want the ergonomics of using WCs.

Then I'd use something like https://github.com/preactjs/preact-custom-element, https://stenciljs.com/docs/custom-elements or https://github.com/solidjs/solid/tree/main/packages/solid-el....

As far as I see, there is nothing that WCs provide which isn't already solved, in a better way, both for devs and users.

And making a framework that use custom elements and shadow DOM for component-based logic and encapsulation seems like a purely philosophical approach to adhere to some vision of "platform purity".


In Lit, yes. It's hand-crafted web components with support for one-way data binding by parameter passing. Any other updates are by event notifications, as the commenter said.


Ah thanks for clarifying, it sounded like you wouldn't recommend either Lit or Stencil.


Sorry if I wasn't clear. I'm a huge fan of Lit! It gives you the freedom to make your own framework -- the parts you need. I respect the OP's comment and our difference of opinion, which is why I didn't reply negatively to it.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: