| title | 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.
- 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.
- 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.
- 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