Is it really necessary to make and use new custom elements and web components (HTML tags)?

Question

I\'m currently learning Front-end web development and the difference between Vanilla JavaScript, frameworks and libraries (React for example). Now I\'m familiar with web compone

Answer 1

As you said, instagram uses react which doesn't transpile to web components

react is not the only components based lib to NOT use web components, there's also ¹ : vue.js, Polymer.

But some other components based lib do use web components as their base ¹ : slim.js, stencil.

All of these libs can be used with webcomponents, some even tell us how to do: react, vuejs.

---

!!! this part may be considered as opinion based !!!

AFAIK the lib which chose not to use webcomponents were created before the web components API was finalized, and the cost to rewrite using them is too big.

---

!!! this part is opinion based !!!

Most person uses lib because web components doesn't give the same effortless two way binding.

In opposition webcomponents seem to give more control about when the component reload and how the binding is done, but it needs to be coded which is extra work.

---

¹ based on the list of custom elements returned by this script on the main page of each lib

Answer 2

React is a totally different beast, dating back almost a decade. It was developed by Facebook because TOO many teams were doing TOO many updates in the same DOM. So they came up with a virtual DOM where all required DOM updates are merged before writing to the Browser DOM.

Works great for Facebook. Newer technologies like the Custom Elements API and Svelte (Compile, don't Transpile) have proven it is no longer the best solution.

Reacts outdated technology now scores a meager 71% on https://custom-elements-everywhere.com/

React and W3C Custom Elements are not friends

Because the Green DOM elements are not tracked by React.

And if you want to mix Green and Yellow you have to basically re-write/wrap each and every component into React syntax. Because React not only does DOM Elements different, but also does DOM Events different.

The future

This makes an interesting future: React and the W3C standard are diverging.

And the W3C standard is defacto set by Browser vendors,
not by the W3C, as we learned from the never implemented ECMAScript 4 saga (1999 - 2008)

So its

Apple (Safari) + Mozilla (FireFox) + Google/Microsoft (Chromium/Chredge)
versus
Facebook (No browser!)

'problem' with the W3C is all members have to agree on a standard; that is why it took years for the Custom Elements API to mature... and React got a head start

Facebook does now "own" 60% of the developers market...
but hey,
Microsoft had 90% of the Browser market... once,
and Flash was installed on nearly every device....once

The Custom Elements API will exist for as long as ECMAScript runs in the browser

It is not a framework or library! It is a language construct.
Not learning Custom Elements is like saying:

I am not learning Set or Map, I can do everything with Arrays

Older rant at: Web components - Services / non html components

Or believe the 2020 Front-End Survey:

Answer 3

In React it's different. Working with React you are using JSX. This is just tag syntax, which is neither a string nor HTML. Under the hood this syntax in converting to usual JavaScript(using Babel). You can read more about it here.