Web Components in Different Frameworks

1
votes

I want to create Custom Web Components and use them in variety of frameworks like Angular, React and vanilla Javascript.

My question is Should I use Polymer(or any other library) to create one or write down by extending "HTMLElement".

What are the differences.

1
javascriptangularreactjspolymerweb-component
They all have different opinions on how to implement web components. Polymer strives to make the future 'vanilla' web components already available through polyfills and what not. The goal for Polymer is to not have to use any Polyfills in the end --> web components would be available by default. - Devilscomrade
I suggest avoiding any framework, like Polymer, and just write native. Polymer really doesn't add much except a level of abstraction that has nothing to do with real Web Components. Learn the rules of the constructor and how to use CSS inside and outside of shadow DOM. But avoid any framework. It is my opinion that they are not worth it. - Intervalia
Stencil might be an interesting option here. It's created by ionic and in the compiles your "stencil components" down to a native web component - Niklas

1 Answers

2
votes

If you want to develop Custom Elements with Polymer, and intergrate them with another framework, you'll need to understand internals of both the Polymer and the other framework(s) to make them work flawlessly together, especially for complex architecture. I guess it's a challenge.

Also, you'll have to deal with the versions and compatibility between different framework versions. For exemple, if you develop a component with Polymer v3, il will be difficult to integrate it with Polymer v2, especially in a cross-browser ecosystem.

Lastly, if you intend to distribute your Custom Elements, you can imagine the 2 constraints above will apply to the targeted developers too. As a React developer, I wouldn't like to have to import another (the Polymer) framework and polyfill to integrate some 3rd-party components.

For theses reasons I would recomment to design Vanilla Custom Elements in order to interact with a highest number of web frameworks.