reactjsweb-componentlit-element

Main differences between lit-element Web Components & React

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"?

Solution

  • Frameworks CREATE HTML,

    Web Components ARE HTML

    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

    React 19 YEAH! they did it: https://odoe.net/blog/react-19-beta-web-components

    W3C standard Web Components (JSWC)

    MDN: Web Components

    (by: Apple, Mozilla, Google, Microsoft)

    Are made up of 3 distinct technologies:

    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):

    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.

    All <input>, <textarea> etc. elements ARE Web Components

    All 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-root

    Note it is a <user-agent>(aka Browser) shadow-root, so it is NOT a open or closed shadowDOM 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.

    On Frameworks and Libraries

    Disclaimer: I built my own motorbikes

    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) .querySelector

    It 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