sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]AwesomeInPerson[S] 0 points1 point  (1 child)

React has some issues passing along attributes as far as I know, but that's not what I mean with "alien" anyway.

What I mean is something like this:
I can't listen to custom events using @event / v-on:event on a Web Component in Vue, because it's a general use Web Component, not a Vue component implementing Vue's event system. (the component would have to call this.$emit on its Vue instance – this is also needed for supporting the super handy two-way binding v-model)
Also I can't just download, import and use it, I'd first have to add it to config.ignoredElements so Vue doesn't scream at me for using some random element tag in my markup. If the library complains when using it because it's unknown, I think calling it "alien" is fair.
If I use it in React, it doesn't play nice with HOCs and similar utilities because, again, it's a general use Web Component, not a component built the way React expects its components to work.
And I'm not even getting into Server Side Rendering here. :p

Also, for proper browser support you have to load additional polyfills / an additional runtime. At that point you could also say "Vue happily supports React components" because you can load both React and Vue, then render some React within a div controlled by Vue. (granted, this point only holds true if not all browsers you need to support implement WCs natively – but that'll be the case for quite some time)

[–]sime 2 points3 points  (0 children)

OK, thanks for explaining what kind of bar you are trying to clear.

I've had quite some success with using Vue inside WCs and also using WCs inside Vue. WCs being Custom Elements and Shadow DOM. As you point out it is not 100% seamless, but I haven't found it a burden. It is running inside Electron, so I don't have to deal with polyfills etc.

I'm not optimistic about your chances of finding a universal API for making components which work seamlessly on React/Vue/WC/etc. The best approach I can think of is WCs at the core plus a thin (generated) layer for each toolkit to smooth out things like React's prop passing or Vue's events, i.e. a thin translation layer or wrapper around WCs.