-
|
Im playing arround and reading documentation of @lit/react and i see "While React can render Web Components, it cannot easily pass React props to custom element properties or event listeners." Im not sure what above means. Lets take a look at example : Both and everything works smooth. Could you please show me example of something that is not solvable without this @lit/react glue ? Im examining usability of lit as tool for building framework agnostic set of components. This sounds that its not in fact framework agnostic. Is same glue needed for lets say vue or svelte ? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
Change the prop to Here's an example showing the problematic interactions: I renamed With the element inspector you can see the object prop is getting set as an attribute as |
Beta Was this translation helpful? Give feedback.
-
|
@augustjk thx a lot, got it. Anyways there is still important question. Does lit have similar problems with vue/svelte/angular? Im trying to answer myself how well lit fits my needs, and im going to build components library. |
Beta Was this translation helpful? Give feedback.
-
|
Honestly, I'm less familiar with those other frameworks. My general understanding is that functionally they work pretty well (as suggested by custom-elements-everywhere.com), but there might be some lacking ergonomics around using it more like native framework components like type-checking so we have some lab initiatives that generate wrapper for web components in Vue and Angular that have been worked on by other team members. Shoelace has some docs on usage with Vue and Angular here: |
Beta Was this translation helpful? Give feedback.
-
|
To be extra clear, Lit doesn't have problems with any frameworks - the frameworks might have problems working with standard DOM. https://custom-elements-everywhere.com/ is a site that tests frameworks for DOM compatibility. You can see most of them do very well. |
Beta Was this translation helpful? Give feedback.
-
|
@justinfagnani Now that React passes 100% of the tests on https://custom-elements-everywhere.com/, are there still cases where one would need the |
Beta Was this translation helpful? Give feedback.
-
|
I would use the web components directly if it works. |
Beta Was this translation helpful? Give feedback.
onClickis a bad example here because it is one of the built-in props that React will apply to native HTML elements, including custom elements. https://react.dev/reference/react-dom/components/common#common-propsChange the prop to
handleClickinstead and you'll see it no longer works.Because React sets unrecognized props as attributes instead, non-string properties will break.
Here's an example showing the problematic interactions:
https://lit.dev/playground/#sample=examples%2Freact-basics&gist=57ef2beeef182272d12fddf930dd3fc9
I renamed
onClicktohandleClickand the button no longer toggles the state. I also made a<simple-card>custom element that takes adataobject, which doesn't wo…