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 - Simple. Fast. Web Components. (Code) (HN)
• 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) (HN)
• 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.
• WebC - Single File Web Components.
• El - Minimal JavaScript application framework inspired by React, Vue, and lit-element.
• WebComponents.org - Discuss & share web components. (Code)
• Custom Elements Everywhere - Custom Element + Framework Interoperability Tests.
• Good resources to learn Web Components (2022)
• Lume Element - Easily create Custom Elements with simple templates and reactivity.
• Enhance SSR - Server side render for custom elements.
• Ponys - Declarative creation of browser-native web components.
• lit-labs/context - Defines an implementation of controllers and decorators for using the Context Protocol as defined by the Web Components Community Group.
• img-victor - Web component converting <img> to SVG <path> with a drawing effect.
• Stencil Component Starter - Starter project for building a standalone Web Component using Stencil.
• Web Component Libraries
• Custom Elements Locator - Chrome extension to find custom elements on a page, and search the catalog for extra information.
• Web Components bookmarks (Code)
• ESLint rules for Web Components
• Web Components Guide (Code)
• Improved Web Component for Pixel-Accurate Atkinson Dithered Images (Lobsters)
• Ardi - Makes it easy to create reactive custom elements that work with any website or JavaScript framework. (Docs)
• hydron - SSR for Web Components.
• Redefine Custom Elements - Patches the global custom elements registry to allow re-defining or reload a custom element.
• lit-transition - Directive for animated transitions in lit-html.
• WCC - Web Components Compiler.
• UIMix - Open-source web site & component editor.
• Custom Elements Manifest - File format that describes custom elements.
• bay.js - Easy to use, lightweight library for web-components.
• Example Components (Built with Tonic)
• Custom Elements Language Server
• Joist - Small library to help with the creation of web components and web component based applications.
• If Web Components are so great, why am I not using them? (2023) (HN)
• Use web components for what they’re good at (2023) (HN)
• Magic-Element - Automatic custom-elements with zero boilerplate.
• HydroActive - Library for hydrating web components and adding "sprinkles of reactivity" to pre-rendered HTML.