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.

1. About Web Components
2. Debunking Web Component Myths and Misconceptions
3. 2023 State of Web Components
4. Web Component Engineering Course

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

• Getting Started: Custom Elements Manifest
• Storybook - Storybook: Frontend workshop for UI development
• Getting Started With Storybook Without a JavaScript Framework | by RayRay | Better Programming

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

• https://www.webcomponents.org/
• https://webcomponents.dev/
• https://github.com/web-padawan/awesome-web-components

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

• What Web Can Do Today
• What PWA Can Do Today
• Project Fugu

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

• GitHub - gitaarik/lit-state: Simple shared app state management for LitElement.
• Valtio, makes proxy-state simple for React and Vanilla
• State Management in Javascript Using Proxy | by Greedy Goblin Games | Medium
• gitaarik/lit-state: Simple shared app state management for LitElement. (github.com)
• MobX - Simple, scalable state management.
• The Mediator Pattern in JavaScript — JSManifest
• Zustand
• Web Components Context Protocol implementation
• Context Protocol - Web Components Community Group proposal
• Lit Context

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)

• tuwrraphael/route-it: dead simple vanilla js spa router (github.com)
• A SPA/PWA Router in Pure Vanilla ES6 JavaScript | by Marc van Neerven | JavaScript in Plain English

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

React

• Lit for React Developers (google.com)
  E-learning to move from React to Lit
• How To Use Web Components in React
• Creating and using Web Components in React
• React hooks reimplemented for Web Components - GitHub

Angular

• How To Use Web Components in Angular
• Using Web Components in Angular Forms with Element Internals - Angular 16 | 15
• How to integrate Web Components using Lit in Angular - This Dot Labs
• Master Web Component Forms Integration - with Lit and Angular
• https://stackoverflow.com/questions/56837900/how-to-import-angular-web-component-in-another-angular-app
• Using Web Components in Angular

Vue

• How to Create Reusable Web Components with Lit and Vue
• How to use Web Components in Vue

---

This list is maintained by Marc van Neerven