Web Components

Lit, Catalyst (used by GitHub) & Shoelace are interesting. Shadow seems like a nice template for making new web components.

Web Components the Right Way is a nice guide.

Notes

• Interoperability is best delivered via web components. Platform features are more resilient too. Web components will outlast any framework.
• One of the most powerful things people tend to write off about Web Components is that they properly package styles with their logic. That, as well as providing a strict CSS API.

Links

• LitElementai - Simple base class for creating fast, lightweight web components.
• Tonic - Stable, Minimalist Web-Component Framework.
• Why I don't use web components (2019) (HN)
• haunted - React's Hooks API implemented for web components.
• Publishing Web Components to NPM
• Elix - High-quality, customizable web components for common user interface patterns.
• All the Ways to Make a Web Component ([HN])
• Shoelace - Forward-thinking library of web components. (Docs) (HN)
• One web component to rule them all? (2020)
• Vanilla Web Components - Framework-free, transpiler-free, scaffolding-free web components.
• The Failed Promise of Web Components (2020) (Follow up article) (HN)
• web-component-analyzer - CLI that analyzes web components and emits documentation.
• lit-analyzer - Monorepo for tools that analyze lit-html templates.
• 11ty Web Component Generator - Use the power of 11ty to generate web components (custom elements). (Code)
• Numl - Open-source Library of Web Components and a Runtime CSS Framework for rapidly building UI that follows your Design System.
• Generic Components - Collection of generic web components with a focus on accessibility, and ease of use. (Web)
• Open Web Components Guide - Guides, tools and libraries for developing web components. (Code) (GitHub)
• Prism Compiler - Experimental compiler for building isomorphic web applications with web components.
• Hackernews Prism - Clone of Hackernews built with Prism, Rust and Actix-web. (Article)
• Light and expressive GUI with web components
• web.dev: How we build the site and use Web Components (2020)
• Awesome Standalones - Curated list of awesome framework-agnostic standalone web components.
• Catalyst - Set of patterns and techniques for developing components within a complex application. (Web)
• Options for styling web components (2021)
• Hybrids - UI library for creating web components with unique declarative and functional approach based on plain objects and pure functions.
• fuco - Functional Component like React, but for Web Components.
• customLibraries - CustomElements like registry for user-land libraries.
• Web Components Spec
• GitHub's Web Component Collection (HN)
• Web Components Are Easier Than You Think (2021)
• Happy DOM - JSDOM alternative with support for server side rendering of web components.
• builtin-elements - Zero friction custom elements like primitive.
• Lit.dev - Simple. Fast. Web Components. (Code)
• Web Components Polyfills
• How we use Web Components at GitHub (2021) (HN)
• Container Queries in Web Components (2021)
• Fractal - Tool to help you build and document web component libraries and design systems. (Web)
• playground-elements - Serverless code experiences with web components.
• Base for Web Components (bacom) - Basic library for writing lightweight web components. Suitable for low-level web components in UI libraries.
• Why it’s okay for web components to use frameworks (2021) (Lobsters)
• Ocean - Web component server-side rendering.
• About Web Components (2021)
• Pretty Cool Elements - Provides element mixins/behaviors, through class names, without names clashing.
• Cross-component coordination protocols
• Vaadin web components - Set of high-quality standards based web components for enterprise web applications.
• lottie-player Web Component - Easily embedding and playing Lottie animations and the Lottie-based Telegram Sticker (tgs) animations in websites.
• Polymer - Library provides a set of features for creating custom elements. (Docs)
• Web Components interlop advantage
• Web Components Community Group
• HTML with Superpowers (2021) - Talk about Web Components. (Video)
• Simplr Router - Small and effective routing solution for Web Components. (Web)
• Spectrum Web Components (Code)
• Switzerland - Takes a functional approach to Web Components by applying middleware to your components.
• Pixano Elements - Library of web components dedicated to data annotation tasks.
• Lion - Fundamental white label web components for building your design system. (Code)
• Web Components API Viewer - API documentation and live playground for Web Components.
• Adventures in prototyping and Web Components with Lit (2021)
• lite-youtube - Web component that renders YouTube embeds faster. (Article)
• blog-pwa - Combining Lit Web Components, Hugo, Service Worker, and Rollup into a progressive web app blog.
• auto-complete-element - Auto-complete input values from server search results.
• snuggsi - Easy Custom Elements in ~1kB. (Web)
• Elements - Custom elements for working with media in the browser that Just Work.
• Custom Element Types - Framework Type Generator for Web Components. (Code)
• How to use Web Components with TypeScript and React (2021)
• Kapsule - Closure based Web Component library.
• Minze - Dead-simple framework for shareable web components. (Docs)
• web-component - Lightweight library providing interface for building web components.
• Node Editor (Web Components) - Zero dependency, unopinionated node editor built as a reusable web component.
• Kor - User Interface Component Library based on LitElement / lit-html. (Code)
• Clarity Design System - Scalable, accessible, customizable, open-source design system built with web components. (Code)
• ESLint rules for Lightning Web Components (LWC)
• webcomponent - Web component library for rust.
• Reactive Controllers feature in Lit 2 - Lets you integrate state manager logic across components.
• WebComponent Router - Nested router based on HTML Web Components.
• Custom Elements Manifest - File format for describing custom elements.
• HTML with Superpowers - Introduction to Web Components. (Code)
• dark-mode-toggle - Custom element that allows you to easily put a Dark Mode toggle or switch on your site.
• Shadow - Simple base class for creating fast, lightweight Web Components with htm.
• Web Components as Progressive Enhancement (2022)
• Atomico - Micro-library for creating web components using only functions, hooks and virtual-dom.
• Innovating beyond libraries and frameworks (2022)
• Pinch Zoom - Web component for pinch zooming DOM elements.
• Collection of Web Components by Clever Cloud
• LS-Element - Web Components with TSX.
• hy-push-state - Web component that lets you turn web pages into web apps.
• Web Components Course | Learn to Create Web Components
• Macaron - Design tool to visually create Web Components. (Code)
• Wokwi Elements - Web Components for Arduino and various electronic parts.
• media-chrome - Fully customizable media player controls using web components (native custom elements). (Web)
• custom-element element - Opinionated template for creating a custom element.
• lite-tiktok - Web component that lazy loads TikTok embeds.