Looking into React code it seems more similar to "Lit-Element" code, Both can be used to create web components. It is very helpful if someone can explain the main differences between the "React" and "Lit-element"?
Main differences between lit-element Web Components & React
13.8k views Asked by Rayan Aradha At
1
There are 1 answers
Related Questions in REACTJS
- Escape dot in jquery validate plugin
- PHP form validation: Where to plop the code
- i want to create a service that does the login functionality?
- Stray start tag head, Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
- Html File Input on Chrome for Android missing extension and mime type
- javascript check input fields are not blank and check input field length?
- Symfony 2 form - date widget and validator
- Bean Validation message interpolation with array constraint parameter used as variable in message
- Bash regular expression execution hangs on long expressions
- Accessing the main object in a javax.validation.ConstraintValidator
Related Questions in WEB-COMPONENT
- Escape dot in jquery validate plugin
- PHP form validation: Where to plop the code
- i want to create a service that does the login functionality?
- Stray start tag head, Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
- Html File Input on Chrome for Android missing extension and mime type
- javascript check input fields are not blank and check input field length?
- Symfony 2 form - date widget and validator
- Bean Validation message interpolation with array constraint parameter used as variable in message
- Bash regular expression execution hangs on long expressions
- Accessing the main object in a javax.validation.ConstraintValidator
Related Questions in LIT-ELEMENT
- Escape dot in jquery validate plugin
- PHP form validation: Where to plop the code
- i want to create a service that does the login functionality?
- Stray start tag head, Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
- Html File Input on Chrome for Android missing extension and mime type
- javascript check input fields are not blank and check input field length?
- Symfony 2 form - date widget and validator
- Bean Validation message interpolation with array constraint parameter used as variable in message
- Bash regular expression execution hangs on long expressions
- Accessing the main object in a javax.validation.ConstraintValidator
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Popular Tags
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
written: october 2020
React
(Over a decade old now, by Facebook/Meta), key feature is its virtual DOM. That means all DOM elements are created in memory and React is in charge of delivering them to the (real)DOM. That also means you can NOT do any DOM updates yourself, or use the W3C standard Events system.
everything in the (real)DOM is handled by React.
Great when, like Facebook, you have to prevent thousands of developers messing around in the same DOM. (There is no slow DOM, only developers writing slow code accessing the DOM)
Update 2022 React R18 still doesn't mention Custom Elements/native Web Components
Update 2024 The last React release was 18.2 in june 2022
W3C standard Web Components (JSWC)
MDN: Web Components
(by: Apple, Mozilla, Google, Microsoft)
Are made up of 3 distinct technologies:
<template>each can be used without the other!
You can attach shadowDOM on a regular
<div>to create a DIV on steroids, without using Custom Elements or Templates.The W3C Web Components standard is defacto developed by Browser builders Apple, Google, Mozilla & Microsoft.
All of them having to agree, makes for slow progress in setting a standard; but once a standard, W3C standards are supported for as long as JavaScript will run in the browser.
Web Components history (starting in 2010):
must see: Video: Web Components: Just in the Nick of Time
should see: Practical lessons from a year of building web components - Google I/O 2016
summary: https://dev.to/this-is-learning/web-components-101-history-2p24
Microsoft chose to swap Browser-engines and made Edge (january 2020) run on Chromium,
Web Components are supported in all modern Browsers now.
Chrome, Safari & FireFox supported Web Components (version V1) since 2018.
And some browsers (partially) supported the now deprecated V0 version for longer.
So there is plenty of experience with Web Components.
The Custom Elements API is an API, nothing more, nothing less, (but a powerful one)
Comparing it to a Framework is like comparing Set and Map to Redux or Vuex.
Templates are great, yet many developers copy/paste blog examples creating a
<template>with javascript code instead of defining them in HTMLshadowDOM (and
<slot>s and:parts) deserve its own long chapter,many developers do not understand what it is or how to use it,
yet most have a firm opinion on it.
All
<input>,<textarea>etc. elements ARE Web ComponentsAll those standard HTML tags have been built (for many moons now!) with Web Components technology by the Browser Vendors.
You can tell by opening the Browser Inspector
All those elements have a
shadow-rootNote it is a
<user-agent>(aka Browser) shadow-root, so it is NOT aopenorclosedshadowDOM us mortal Developers can create/use.Developers can not access
<user-agent>Web Components.Lit
(by Google). Is a library built on top of the W3C Web Components technologies
called Lit-Element & Lit-HTML prior to version 2.
Before Lit, Google also had Polymer
!!! You do NOT need Lit to develop Web Components !!!
Lit is a tool It will speed up the development process.
When you learn Lit first, you are learning a tool not the Web Components technology
Lit is syntactic sugar (kinda like jQuery was)
(Just like in early jQuery days) There are 60+ Lit alternatives:
https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
A Future for React?
The interesting part is React, due to its virtual DOM implementation, only supports the W3C Custom Elements API for 71% (see https://custom-elements-everywhere.com/).
You need to create a React wrapper for each and every W3C component you want to use.
https://reactjs.org/docs/web-components.html)
The React17 update (october 2020) doesn't even mention the words Web Components, Custom Elements, shadowDOM or Templates
[Update 2021] I don't read React updates no more. But Benny Powers did:
https://dev.to/bennypowers/what-s-not-new-in-react-18-45c7
WHATWG
The very interesting truth is Facebook/Meta has no Browser, and isn't a core member of the WHATWG. And since 2019, the WHATWG (read: Google, Apple, Microsoft , Mozilla) are in control of what runs in the Browser:
https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html
Frameworks
All other Frameworks (Angular, Vue, Svelte etc.) do support the W3C standard 100% and can create Web Components
This makes for an interesting future.
Facebook/Meta, not developing a Browser, hardly has a stake in what Browsers run.
The WHATWG is by-invitation-only; will Google, Apple, Microsoft and Mozilla invite Facebook?
Some say React is the new Flash (End Of Life: December 31, 2020)
Some say FaceBook/Meta will merge Whatsapp, insTagram and Facebook,
then will provide a new Browser everyone in the world must install
On Frameworks and Libraries
Frameworks and libraries are like the canned and packed ingredients you buy in the supermarket.
Sure, you get a meal on the table.
But go buy groceries, taste spices, learn how to cut, bake and grill,
and you will become a Chef.
One problem with Libraries/Frameworks is: there will always be breaking changes in new versions when new features are introduced. OR when features are no longer required because they are now part of the native and thus faster standard (but a different syntax) Think jQuery selectors and the (later implemented)
.querySelectorIt is never a one-click upgrade. And because you most-likely did not write TDD tests for all these new features, you have to check and test ALL your code again
Or worse, like with the Google Angular 1 to Angular 2 "upgrade"; you have to rewrite everything...
It is your choice what professional Front-End Developer you want to be