awesome-web-components

A curated list of awesome Web Components resources.
https://github.com/web-padawan/awesome-web-components

Last synced: 3 days ago
JSON representation

Frameworks
- Svelte
- Vue
  - Using Web Components in Vue
Guides
- Accessibility
- Best Practices
- Codelabs
- Examples
  - open-wc code examples - Collection of best practices and design patterns for developing web components.
  - generic-components - Collection of generic web components with a focus on accessibility, and ease of use.
  - howto-components - Collection of web components that implement common web UI patterns.
  - Nude UI - Collection of accessible, customizable, ultra-light web components.
  - vanilla-retro-js - Vanilla JS UI component library of HTML deprecated tags.
  - web-components-examples - Series of web components examples, related to the MDN web components documentation.
  - Nude UI - Collection of accessible, customizable, ultra-light web components.
Insights
Introduction
Libraries
- Benchmarks
  - All the Ways to Make a Web Component
  - web-components-todo - The same todo application built in different Web Components libraries for benchmark purpose.
  - web-components-benchmark - Benchmark Web Components technologies with various examples.
- Class Based
  - FAST Element - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
  - Lit - Simple library for building fast, lightweight web components.
  - DNA - Progressive Web Components library.
  - element-js - Simple and lightweight base classes for web components with a beautiful API.
  - Forge Core - Building blocks and utilities that are used when building Forge Web Components.
  - Joist - Set of small libraries designed to add the bare minimum to web components to make you productive.
  - Lightning Web Components - blazing fast, enterprise-grade Web Components foundation.
  - Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
  - Panel - Web Components + Virtual DOM: web standards for powerful UIs.
  - slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
  - WebCell - Web Components engine based on VDOM, JSX, MobX & TypeScript.
  - Tonic - Minimalist, stable, audit friendly component framework.
  - Lume Element - Write custom elements with reactivity and templating powered by Solid.js signals and effects.
  - ReadyMade - Write custom element classes with decorators. No dependencies.
  - Stencil - Compiler for generating Web Components.
- Functional
  - Solid Element - Library that extends Solid adding Custom Web Components and extensions.
  - atomico - Small library for the creation of interfaces based on web components using functions and hooks.
  - haunted - React's Hooks API implemented for web components.
  - hybrids - UI library for creating Web Components with simple and functional API.
  - Elemento - A lightweight library for building functional web components using signals and Lit.
- Integrations
  - ember-custom-elements - Render Ember and Glimmer components using custom elements.
  - preact-custom-element - Generate/register a custom element from a preact component.
  - @adobe/react-webcomponent - Automate the wrapping of a React component in a custom element.
  - nuxt-custom-elements - Export your project components as custom elements for integration into external pages.
  - react-shadow - Utilise Shadow DOM in React with all the benefits of style encapsulation.
  - reactify-wc - Use web components with React properties and functions.
  - remount - Mount React components to the DOM using custom elements.
  - @riotjs/custom-elements - Simple API to create vanilla custom elements with Riot.js.
Maintainers
- History
  - @mateusortiz
  - @web-padawan
Meta Frameworks
- Starter Kits
  - Create Open Web Components - Web component project scaffolding.
  - custom-element-boilerplate - Boilerplate for creating a custom element.
  - hello-web-components - Simple starter hello world web component written in TypeScript.
  - nutmeg - Build, test, and publish vanilla Web Components with a little spice.
- Svelte
  - Enhance - Web standards-based HTML framework for building lightweight web applications.
  - Rocket - Modern web setup for static sites with a sprinkle of JavaScript.
  - AMP - Web component framework to easily create user-first experiences for the web.
  - luna-js - SSR framework that makes working with the WebComponents standard a breeze.
  - Web Components Compiler - Compiler to make server-side rendering of native web components easier.
  - WebC - Framework-independent standalone HTML serializer for generating markup for web components.
- Testing Solutions
  - Cypress component tests for Lit - How to run component tests for a Lit web component with Cypress.
  - Developing Components: Testing - Using @web/test-runner for testing web components in a real browser.
  - How To Automate Shadow DOM In Selenium WebDriver - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
  - Native Automation support for Shadow DOM - Shadow DOM and open-source testing frameworks.
  - Open Web Components: Testing - Opinionated package that combines and configures testing libraries.
  - Testing Shadow DOM elements in Selenium - In Selenium 4, there is now a way to access Shadow DOM nodes.
  - Test web components with Playwright - So you’ve created a native web component or two. How do you test them in popular browsers?
  - W3C Webdriver conquering automation of Shadow DOM - Shadow DOM tree and its interaction with the W3C Webdriver.
  - capybara-shadowdom - Ruby gem that adds basic support for the Shadow DOM to Capybara.
  - cypress-lit - Test your Lit elements and native web components in Cypress with all the modern browsers.
  - query-selector-shadow-dom - querySelector that can pierce Shadow DOM roots, useful for automated testing.
  - shadow-automation-selenium - Shadow DOM automation using Selenium.
- Tools
  - Backlight
  - @storybook/web-components - UI development environment for plain web-component snippets.
  - webcomponents.dev - Component IDE for web platform developers.
  - Custom Elements Locator - Chrome extension to find custom elements on a page.
  - web-component-analyzer - CLI that analyzes web components and emits documentation / diagnostics.
  - Web Components Codemods - Codemods for Web Components.
Miscellaneous
- Custom State Pseudo Class
  - Vaadin Directory - Publish, discuss and rate web components

Programming Languages

JavaScript 71 TypeScript 55 HTML 9 CSS 3 Java 1 Ruby 1 Svelte 1 Twig 1 Bikeshed 1

Categories

Archive 1,043 Frameworks 216 Articles 208 Standards 150 Real World 139 Tutorials 112 Guides 35 Libraries 31 Meta Frameworks 28 Insights 23 Proposals 11 Introduction 10 Miscellaneous 4 Books 3 Usage Metrics 3 Maintainers 2

Sub Categories

History 1,035 Architecture 189 Shadow DOM 125 Tools 121 Svelte 110 Angular 106 Component Libraries 50 Design Systems 33 Components 27 Case Studies 18 Class Based 15 Talks 13 Testing Solutions 12 Use Cases 11 Accessibility 11 Codelabs 11 Styling 10 HTML Templates 10 Polyfills 10 Custom Elements 9 Presentations 9 Integrations 8 Custom State Pseudo Class 7 Examples 7 Best Practices 6 CSS Shadow Parts 6 React 5 Constructable Stylesheet Objects 5 Interoperability 5 Functional 5 Limitations 4 Starter Kits 4 Podcasts 4 Benchmarks 3 Form-associated Custom Elements 3 Vue 1

Keywords

web-components 56 webcomponents 41 javascript 31 custom-elements 31 web-component 16 shadow-dom 14 design-system 13 typescript 13 lit-element 13 lit-html 12 components 12 ui 11 ui-components 11 react 11 html 10 css 9 lit 7 angular 7 stenciljs 7 jsx 6 custom-element 5 vue 5 framework 5 web 5 svelte 5 customelements 4 polymer 4 hls 3 video 3 vimeo 3 youtube 3 dash 3 3d 3 webgl 3 html5 3 testing 3 ui-library 3 solid 3 component-library 3 storybook 3 accessibility 3 preact 3 user-interface 2 webcomponent 2 uikit 2 threejs 2 polyfill 2 lume 2 designsystem 2 custom 2