Web Components & Lit Library - a Curated List of documentation

A curated list of great documentation to get frontenders started with Web Components & Lit, with or without a framework.

Web Components basics

Basically, Web Components consist of three technologies: Custom elements, Shadow DOM, and HTML templates.- Web Components | MDN
Simply the best source of truth about all Web Technology

webcomponents.org - Discuss & share web components
WebComponents.org aims to make it easy to share, discover, and reuse web components
Open Web Components - Open Web Components
Well-known and experience-tested recommendations for their web component projects
Project Scaffolding Development: Generator: Open Web Components
What are Web Components (video)
Web Components At Work (Thomas Wilburn)

In-Depth Web Components

Rob Eisenberg

Rob Eisenberg is a respected voice in the Web Components community. He has worked on Angular at Google, on FAST at Microsoft, and is a member of the W3C Web Componnents Community Group.

Relevant Web Standards

Web Components are an umbrella term. These are the underlying technologies you need to know to make the best of Web Components & Lit.

ES6 Module - JavaScript modules - JavaScript | MDN
Module encapsulation, imports, exports
String templates (ES6) - Template literals (Template strings) - JavaScript | MDN
Template-based rendering with variables
CSS custom properties/variables - Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN
Isolated styling with defined variables for external influence
customElements.define()
How to register a custom HTML element
Shadow DOM

Google's Lit Library

A really high level view of Lit would be that it's simply filling in the Gaps in the standards.

Lit is a tiny (<5Kb) library written by Justin Fagnani of Google, which was developed to fill a few gaps and make working with Web Components as easy as working with React UI, but without the need for expensive indirections like Virtual DOM and JSX.> A Lit component renders its template initially when it's added to the DOM on a page. After the initial render, any change to the component's reactive properties triggers an update cycle, re-rendering the component.

Lit batches updates to maximize performance and efficiency. Setting multiple properties at once triggers only one update, performed asynchronously at microtask timing. During an update, only the parts of the DOM that change are re-rendered. Although Lit templates look like string interpolation, Lit parses and creates static HTML once, and then only updates changed values in expressions after that, making updates very efficient. - from https://lit.dev/docs/components/rendering

See Lit for React Developers | Google Codelabs- Lit (Simple. Fast. Web Components)
Lit Homepage

From Web Component to Lit Element | Google Codelabs
A course to take you from React to Lit expert
GitHub - web-padawan/awesome-lit: A curated list of awesome Lit resources.
A curated list of wonderful Lit-related stuff
The Browser is your Framework: Building a PWA with only Web Components and Lit
My article on creating PWAs with only Web Components and Lit, and the NPM initializer Artem Maiorov created with me.
See also the list of LinkedIn Posts around this approach.
Some things to know when developing with Lit

Component Libraries & Design Systems

Design System Tools- Custom Element Manifest

Web Components Component Libraries

Ready-to-use UI component libraries to use in any project.

Microsoft Fast - FAST
Shoelace - Shoelace
Ionic - Ionic Framework - The Cross-Platform App Development Leader
Google Material: material-components/material-web: Material Design Web Components (github.com)
Note: v3 is currently in development (April 2023)
Adobe (Spectrum) - Spectrum Web Components - Spectrum Web Components
RedHat (Patternfly) - PatternFly 4
AWS (Amplify) - Amplify UI Components - AWS Amplify Docs
Vaadin - GitHub - vaadin/web-components: A set of high-quality...

Web Component Design Systems / Discovery

Web Components Only Approach (not using a framework)

When you decide not to use any existing framework, you have to decide what to use for a few common areas normally taken care of by the framework, such as state management and routing.

General Web Capabilities

State Management

State Management is one of the strongest reasons people keep referring to frameworks, but if you look at what people then use, it's a lot of Redux and other libraries, which are combined with their favorite frameworks, sometimes even packaged, but libraries they are.The same libraries and approaches can be combined with Web Components and Lit!- Using Redux in a LitElement app | Vaadin

Routing

When not using a framework, routing is not provided as a ready-to-use component. Using browser-native functionality isn't complex (using History), and lately, the new URLPattern API allows you to do any kind of routing, including complex parameter passing, natively. The Lit PWA (see my previously mentioned article) uses it, including lazy-loading polyfills if needed.- URLPattern brings routing to the web platform - Chrome DevelopersOther router solutions:- Polymer/pwa-helpers: Small helper methods or mixins to help you build web apps. (github.com)

Using Web Components in Frameworks

When you do decide to work with your favorite framework, Web Components can still be a valid choice for everything UI, because you will be able to reuse the components across projects with differing frameworks, and they will work regardless of framework upgrades or switching to other frameworks. This is why many companies, such as Google, Adobe, RedHat, Microsoft, Cisco, SAP and VMWare are already investing heavily in Web Components.

Generic information on Web Components in frameworks:

Create Web Components by using Google Lit, publish them on Npm and use them in React, Angular & JS projects - DEV Community 👩‍💻👨‍💻
Pairing Web Components with JS frameworks - Ionic
Custom Elements Everywhere
An overview of Web Component readiness in the popular frameworks

mvneerven / lit-list Goto Github PK

lit-list's Introduction