First, I do dabble in frontend dev but I'm more of a backend person. I never used React and briefly played with Polymer 2.

Shadow DOM and custom tags make it possible to closely mimic the way we used to do UI development back in the Delphi/VB6 era. I like how eg. css properties only apply to a given component.

Polymer seemed like the most lightweight possible way to implement this because it uses the browser facilities. I understand that React also has components and custom tags (JSX) but it doesn't use browser facilities but rather implements them itself, which just sounds like the wrong way of approaching the problem.

Polymer only uses browser facilities at the most basic level. As soon as you get into data binding/data passing/callback/events, Polymer becomes ... weird.

Still my favorite one is "Commas in literal strings: Any comma occurring in a string literal must be escaped using a backslash (\)." here: https://polymer-library.polymer-project.org/3.0/docs/devguid...

React is Javascript through and through, and yes, it only uses browser facilities. Because JSX is not custom tags, it's function calls: https://reactjs.org/docs/react-without-jsx.html

From what I understand, Web Components and Polymer have a ton of fundamental limitations, starting with how data in a component tree is bound to the DOM as strings, so for anything even mildly complicated you have to roll your own JSON.parse / JSON.stringify handling into every component and have to deal with the DOM parsing exploding if you dump too much data into it.

"component tree is bound to the DOM as strings" You can pass data as props instead of attrs, same as with react - https://github.com/Polymer/lit-element. I wonder why this pop's up all the time.

It is true that polymer had quite a bit of limitations, but there are other solutions like stencil, lit-element, svelte or vue (yes it can output WC's) that do not have those problems.

Lit-html in latest version I think is only outperformed by inferno from popular solutions.

That's still converting attributes to/from DOM strings, which seems likely to end up in bad places once you've got a huge amount of data.

Here - https://jsfiddle.net/ae3bjk7g/14/ Since this show on HN all the time. Here is an example where Web Components pass a FUNCTION as a property to eachother to demonstrate its not strings/JSON. Hopefully this clears things up for you. Cheers!

Where did you get this information from?

This is not true, there is no string conversion. There is even separate syntax for setting props vs attrs.

Check out the readme here.

https://github.com/Polymer/lit-element

I also normally use redux in my WC applications.

Well... Despite Polymer's repeating of "use the platform", I always felt React used the platform far more than Polymer. In the end, React is just a way to structure an application that generates and manipulates regular HTML. In other words, you can use shadow DOM and custom tags just fine. If the browser supports it, that is - and if you've used Polymer since before Web Components were standardised (HTML Imports still aren't and will never be), that was a major downside, and the opposite of light-weight.

In practice polymer was slow, because franeworks like react get their performace by batching updates, and polymer couldn't do this because the components didn't know about each other...