awesome-web-components
Web component guide
A curated collection of resources and guides for building and using reusable custom web components
A curated list of awesome Web Components resources.
3k stars
116 watching
154 forks
last commit: 7 months ago
Linked from 7 awesome lists
awesomeawesome-listcustom-elementsshadow-domweb-componentswebcomponents
Awesome Web Components / Introduction | |||
An Introduction to Web Components | |||
Intro to Web Components | |||
The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM | |||
The Motivation For Using Web Components, an Introduction | |||
The Power of Web Components | |||
Web Components 101 | |||
Web Components: From the orbital height | |||
What are browser-native web components? | |||
Why Web Components? | |||
Awesome Web Components / Standards / Custom Elements | |||
A Guide to Custom Elements for React Developers | |||
All about HTML Custom Elements | 201 | over 5 years ago | |
Custom elements | |||
Custom Elements v1: Reusable Web Components | |||
Handling properties in custom element upgrades | |||
Handy Custom Elements' Patterns | |||
HTML Living Standard: Custom elements | |||
MDN - Using Custom Elements | |||
web-platform-tests | 5,014 | 3 days ago | |
Awesome Web Components / Standards / Shadow DOM | |||
A complete guide on shadow DOM and event propagation | |||
DOM Living Standard: Shadow tree | |||
MDN - Using Shadow DOM | |||
Mind the document.activeElement! | |||
Open vs. Closed Shadow DOM | |||
Shadow DOM | |||
Shadow DOM and events | |||
Shadow DOM in depth | 231 | over 2 years ago | |
Shadow DOM slots, composition | |||
Shadow DOM styling | |||
Shadow DOM v1: Self-Contained Web Components | |||
The Rise of Shadow DOM | |||
Understanding Slot Updates with Web Components | |||
What is the Shadow DOM? | |||
Who doesn't love some slots? | |||
Your Content in Shadow DOM Portals | |||
web-platform-tests | 5,014 | 3 days ago | |
Awesome Web Components / Standards / HTML Templates | |||
Crafting Reusable HTML Templates | |||
HTML Living Standard: The template element | |||
HTML templates with vanilla JavaScript | |||
MDN - <template>: The Content Template element | |||
MDN - Using templates and slots | |||
Template element | |||
Templating in HTML | |||
The HTML5 template element | |||
Understanding The Template Element In HTML | |||
web-platform-tests | 5,014 | 3 days ago | |
Awesome Web Components / Standards / CSS Shadow Parts | |||
W3C First Public Working Draft | |||
CSS Shadow Parts are coming! | |||
MDN - ::part() CSS pseudo element | |||
MDN - part global attribute | |||
::part and ::theme, an ::explainer | |||
web-platform-tests | 5,014 | 3 days ago | |
Awesome Web Components / Guides / Accessibility | |||
Accessibility for Web Components | |||
Accessibility with ID Referencing and Shadow DOM | |||
Dialogs and shadow DOM: can we make it accessible? | |||
How to Make Accessible Web Components — a Brief Guide | |||
Managing focus in the shadow DOM | |||
The future of accessibility for custom elements | |||
The Guide to Accessible Web Components | |||
Web Components and the Accessibility Object model (AOM) | |||
Web Components punch list | |||
Web components still need to be accessible | |||
Awesome Web Components / Guides / Best Practices | |||
Custom Element Best Practices | |||
Developing Components: Publishing | |||
Gold Standard Checklist for Web Components | 1,031 | over 9 years ago | |
Guidelines for creating web platform compatible components | |||
How to Publish Web Components to NPM | |||
Open Web Components Recommendations | |||
Awesome Web Components / Guides / Codelabs | |||
Build a Story Web Component with LitElement | |||
Building Custom Elements with Web Components for the 2020 Elections | |||
Creating Custom Form Controls with ElementInternals | |||
From Web Component to Lit Element | |||
HowTo Components –<howto-checkbox> | |||
HowTo Components –<howto-tabs> | |||
HowTo Components – <howto-tooltip> | |||
Lit: basics | |||
Lit: intermediate | |||
Lit for React Developers | |||
Web Components: basics | |||
Awesome Web Components / Guides / Examples | |||
generic-components | 559 | over 2 years ago | Collection of generic web components with a focus on accessibility, and ease of use |
howto-components | 866 | 2 months ago | Collection of web components that implement common web UI patterns |
Nude UI | 221 | 29 days ago | Collection of accessible, customizable, ultra-light web components |
open-wc code examples | Collection of best practices and design patterns for developing web components | ||
vanilla-retro-js | 16 | almost 2 years ago | Vanilla JS UI component library of HTML deprecated tags |
web-components-examples | 3,132 | 23 days ago | Series of web components examples, related to the MDN web components documentation |
Awesome Web Components / Articles / Architecture | |||
A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends | |||
Frankenstein Migration: Framework-Agnostic Approach (Part 1) | |||
Frankenstein Migration: Framework-Agnostic Approach (Part 2) | |||
Generating Config driven Dynamic Forms using Web Components | |||
Hiding internal framework methods and properties from web component APIs | |||
How to deliver Custom Elements | |||
Making Web Components for Different Contexts | |||
Supporting both automatic and manual registration of custom elements | |||
Web Components — the right way | |||
Awesome Web Components / Articles / Interoperability | |||
Advanced Tooling for Web Components | |||
Custom Elements Everywhere | |||
Custom Elements That Work Anywhere | |||
JavaScript frameworks, meet Web Components | |||
Web Components aren't a framework replacement - they're better than that | |||
Web Components: Seamlessly interoperable | |||
Awesome Web Components / Articles / Limitations | |||
Beyond the polyfills: how Web Components affect us today? | |||
Custom elements, shadow DOM and implicit form submission | |||
Form-associated custom elements | |||
You might not need shadow DOM | |||
Awesome Web Components / Articles / Styling | |||
Does shadow DOM improve style performance? | |||
Eschewing Shadow DOM | |||
How Nordhealth uses Custom Properties in Web Components | |||
Options for styling web components | |||
Style scoping versus shadow DOM: which is fastest? | |||
Styling a Web Component | |||
Styling in the Shadow DOM With CSS Shadow Parts | |||
Thinking Through Styling Options for Web Components | |||
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think | |||
Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements | |||
Awesome Web Components / Real World / Case Studies | |||
Apple Just Shipped Web Components to Production and You Probably Missed It | |||
Bringing Order to Web Design Chaos (with Web Components) | |||
Get moving with Microsoft’s FAST web components | |||
How Web Components Are Used at GitHub and Salesforce | |||
How we use Web Components at GitHub | |||
Implementing a Design Language System with Stencil.js | |||
ING ❤ Web Components | |||
ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer | |||
Lessons Learned, making our app with Web Components | |||
Looking back on five years of web components | |||
Shipping Web Components in 2020 | |||
The Firefox UI is now built with Web Components | |||
Using web components to encapsulate CSS and resolve design system conflicts | |||
Web Components at GitHub - Web Components SF Meetup | |||
Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt | |||
Web Development At Scale: Composable Applications With Web Components | |||
web.dev engineering blog #1: How we build the site and use Web Components | |||
Awesome Web Components / Real World / Components | |||
<active-table> | 225 | 9 months ago | Editable table web component |
<api-viewer> | 270 | 2 months ago | API documentation and live playground for Web Components |
<chess-board> | 102 | 4 months ago | Standalone chess board web component |
<css-doodle> | 5,649 | about 1 month ago | Web component for drawing patterns with CSS |
<dark-mode-toggle> | 1,177 | about 1 month ago | Custom element that allows to create a dark mode toggle or switch |
<deep-chat> | 1,545 | 7 days ago | Web component for chat with AI capabilities |
<emoji-picker> | 1,495 | 12 days ago | Lightweight emoji picker, distributed as a web component |
<fg-modal> | 71 | about 2 years ago | Accessible modal dialog web component |
<file-viewer> | 37 | 7 months ago | Web component built with Svelte to view files |
<json-viewer> | 177 | 23 days ago | Web component to visualize JSON data in a tree view |
<lite-youtube> | 5,902 | 23 days ago | Lite YouTube embed with a focus on visual performance |
<midi-player> | 683 | 6 months ago | MIDI file player and visualizer web components |
<model-viewer> | 6,984 | 5 days ago | Web component for rendering interactive 3D models |
<player-x> | 104 | 4 months ago | Media player web component |
<progressive-image> | 264 | 10 months ago | Custom element to progressively enhance image placeholders |
<qr-code> | 1,284 | over 1 year ago | – Web component for rendering customizable, animate-able, SVG-based QR codes |
<range-slider> | 63 | 4 months ago | Accessible range slider custom element with keyboard support |
<rapi-doc> | 1,710 | 3 days ago | Web component for creating documentation from OpenAPI Specification |
<shader-doodle> | 509 | over 1 year ago | Web component for writing and rendering shaders |
<theme-switch> | 13 | 8 months ago | Animated toggle button to switch between light, dark, and system theme |
<trix-editor> | 19,114 | 22 days ago | Rich text editor custom element for everyday writing |
<vime-player> | 2,771 | 4 days ago | Customizable, extensible, accessible and framework agnostic media player |
<web-vitals> | 182 | over 1 year ago | Bring quickly into your page using custom elements |
Awesome Web Components / Real World / Component Libraries | |||
AMP | 14,886 | 22 days ago | Web component framework for easily creating user-first websites, stories, ads, emails and more |
AnywhereUI | 30 | 6 months ago | Collection of rich web components that includes framework bindings. Created with StencilJS |
Apollo Elements | 417 | 9 months ago | Custom elements for using Apollo GraphQL with various web components libraries |
AXA Pattern Library | 126 | 12 months ago | AXA CH UI components library built with Web Components |
Blackstone UI | 92 | 13 days ago | Web components for creating interfaces by Blackstone Publishing |
Blaze UI Atoms | 1,555 | over 1 year ago | Set of web components powered by Blaze CSS |
Brightspace UI core | 64 | 6 days ago | Collection of web components for building Brightspace applications |
Clever components | 221 | 6 days ago | Collection of Web Components made by Clever Cloud |
Curvenote | 182 | over 1 year ago | Web components for creating interactive scientific articles |
DataFormsJS | 190 | 2 months ago | Standalone Components for SPA routing, displaying data from web services, and more |
Dile Components | 78 | 6 days ago | General use Web Components for websites and applications |
elements-sk | 29 | over 1 year ago | Collection of custom elements for "a la carte" web development |
github-elements | 2,796 | 11 months ago | GitHub's Web Component collection |
Elix | 825 | over 1 year ago | High-quality, customizable web components for common user interface patterns |
Furo Webcomponents | 12 | 27 days ago | Enterprise ready set of web components which work best with Eclipse Furo |
Fusion Web Components | 12 | about 1 month ago | Ser of web components used by Equinor Fusion |
Ignite UI Web Components | 121 | 6 days ago | Complete library of UI components from Infragistics |
Immersive Custom Elements | 134 | almost 5 years ago | Set of web components for embedding immersive (VR & AR) content |
Joomla UI custom elements | 32 | about 1 month ago | Compilation of Joomla 4 Custom Elements |
Ketch.UP | 8 | 3 days ago | Web components library for Sme.UP |
LDRS | 1,754 | about 1 month ago | Lightweight, customizable loading animations/spinners |
Lion Web Components | 1,771 | 6 days ago | Set of highly performant, accessible and flexible Web Components |
LRNWebComponents | 246 | 7 days ago | ELMS:LN produced web components for any project |
Lume | 1,349 | 12 days ago | Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL |
Medblocks UI | 54 | 3 months ago | Web Components for rapid development of openEHR and FHIR systems |
Microsoft Graph Toolkit | 953 | 3 days ago | Collection of web components for the Microsoft Graph |
Mutation testing elements | 28 | 3 days ago | A schema for mutation testing results with the web components to visualize it |
Nightingale | 124 | 9 days ago | Data visualisation web components for the life sciences |
Nuxeo Elements | 27 | 8 days ago | Components for building web applications with Nuxeo using Web Components |
One Platform Components | 31 | 20 days ago | Set of web components for Red Hat One Platform |
Open Business Application Platform Web Components | 12 | almost 2 years ago | Collection of web components designed for business applications |
Pixano Elements | 38 | over 1 year ago | Re-usable web components dedicated to data annotation tasks |
Playground Elements | 550 | 2 months ago | Serverless code experiences with web components |
Shoelace | 12,935 | 9 days ago | A forward-thinking library of web components |
Smart Web Components | 434 | 7 months ago | Web components for business applications |
Stripe Elements | 79 | 12 months ago | Custom Element Wrapper for Stripe.js v3 Elements |
TEI Publisher Components | 18 | 7 days ago | Collection of web components used by TEI Publisher and apps generated by it |
Titanium Elements | 18 | 8 days ago | Collection of lightweight web components used by Leavitt Group Enterprises |
Tradeshift Elements | 15 | 3 days ago | Reusable Tradeshift UI Components as Web Components |
TrendChart Elements | 48 | 4 months ago | Components to generate simple, light and responsive charts |
Umbraco UI Components | 123 | 3 days ago | Collection of user interface web components for Umbraco CMS |
Vaadin components | 469 | 3 days ago | Evolving set of high-quality web components for building business web applications |
VSCode Webview Elements | 0 | 11 months ago | Components for creating VSCode extensions which use the Webview API |
Warp View | 8 | over 1 year ago | Collection of charting web components for Warp 10 |
Webmarkets web components | 1 | about 1 month ago | Set of Webmarkets' public web components |
Wired Elements | 10,526 | about 1 year ago | Set of common UI elements with a hand-drawn, sketchy look |
Wokwi Elements | 186 | 21 days ago | Web Components for Arduino and various electronic parts |
XWeather | 7 | about 4 years ago | Collection of web components implementing portions of the OpenWeatherMap API |
Awesome Web Components / Real World / Design Systems | |||
Astro Space UX Design System | 115 | 8 days ago | Set of components to build rich space app experiences with established interaction patterns |
Auro Design System | Alaska Airlines design system to innovate on ideas and collaborate on the future | ||
Blueprint UI | Web Component based design system with flexible and lightweight components | ||
Bolt Design System | 292 | over 1 year ago | Twig and Web Component-powered UI components, reusable visual styles and tooling |
Calcite Components | 290 | 5 days ago | Shared Web Components for Esri's Calcite design framework |
Carbon Web Components | 478 | over 1 year ago | Carbon Design System variant on top of Web Components |
Clarity Core Web Components | 166 | 15 days ago | Suite of web components from the Clarity Design System |
Crayons | 220 | 6 days ago | Collection of web components that adheres to the Freshworks Design System |
FAST Components | 9,286 | 22 days ago | Library of Web Components based on the FAST design language |
Fluent UI Web Components | 18,528 | 6 days ago | Library of Web Components that supports Microsoft's Fluent design language |
Forge Components | 47 | 6 days ago | Library of Web Components adhering to the Forge Design System |
GOV.UK Web Components | 4 | almost 4 years ago | Set of encapsulated web components consuming the GOV.UK Design System |
Helix UI | 60 | almost 2 years ago | Web Component library for the Helix Design System |
Liquid | 73 | 10 days ago | UI component library based on the Liquid Design System |
Lyne Components | 47 | 3 days ago | Building blocks of the Lyne Design System are based on Web Components |
Material Web Components | 9,364 | 12 days ago | Material Design implemented as Web Components |
Momentum UI Web Components | 201 | 6 days ago | Set of UI components based on Momentum Design |
Nord | Nordhealth’s design system for products, digital experiences and brand | ||
NuML | NUDE Elements | 337 | over 1 year ago | HTML Framework and Design System based on Web Components and runtime CSS generation |
OutlineJS | 128 | 8 months ago | Web component based design system starter kit |
PatternFly Elements | 378 | 5 days ago | Collection of flexible and lightweight Web Components based on the Unified Design Kit |
Pharos Design System | 123 | 8 days ago | JSTOR's design system to create cohesive, supportive, and beautiful experiences |
Red Hat Design System | 100 | 3 days ago | Web components for building uniform experiences with the Red Hat brand |
Siemens iX Web Components | 206 | 6 days ago | Web Components implementing Siemens iX design system |
Spectrum Web Components | 1,287 | 6 days ago | Adobe Spectrum design language implementation built with Web Components |
UI5 Web Components | 1,566 | 3 days ago | Set of reusable UI elements implementing SAP Fiori Design Guidelines |
U-M Library Design System | University of Michigan Library Design System | ||
Zooplus web components | 45 | about 2 months ago | Set of web components that implement Z+ shop style guide |
Awesome Web Components / Real World / Use Cases | |||
How we chose to build our Design System using StencilJS Web Components | |||
How searching for a bundle-free React led me to web components | |||
Reasons Web Components are perfect for a big company | |||
5 Reasons Web Components Are Perfect for Design Systems | |||
Web components: the secret ingredient helping power the web | |||
Web Components for Enterprise. Part 1: Salesforce, Oracle, SAP | |||
Web Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin | |||
Why I use Web Components - My use cases | |||
Why we use Web Components | by | ||
Why we use Web Components | by | ||
Awesome Web Components / Libraries / Class Based | |||
DNA | 45 | 13 days ago | Progressive Web Components library |
element-js | 26 | 6 days ago | Simple and lightweight base classes for web components with a beautiful API |
FAST Element | 9,286 | 22 days ago | Lightweight library for building performant, memory-efficient, standards-compliant Web Components |
Forge Core | 3 | 30 days ago | Building blocks and utilities that are used when building Forge Web Components |
Joist | 121 | 9 days ago | Set of small libraries designed to add the bare minimum to web components to make you productive |
Lit | Simple library for building fast, lightweight web components | ||
Lightning Web Components | 1,638 | 5 days ago | blazing fast, enterprise-grade Web Components foundation |
Omi | 13,065 | 5 days ago | Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating) |
Panel | 273 | 6 days ago | Web Components + Virtual DOM: web standards for powerful UIs |
slim.js | 1,023 | about 1 year ago | Fast & Robust Front-End Micro-framework based on modern standards |
Stencil | 12,577 | 12 days ago | Compiler for generating Web Components |
Tonic | 867 | 6 months ago | Minimalist, stable, audit friendly component framework |
WebCell | 173 | 6 days ago | Web Components engine based on VDOM, JSX, MobX & TypeScript |
Awesome Web Components / Libraries / Functional | |||
atomico | 1,188 | 8 days ago | Small library for the creation of interfaces based on web components using functions and hooks |
haunted | 2,617 | 30 days ago | React's Hooks API implemented for web components |
hybrids | 3,055 | 22 days ago | UI library for creating Web Components with simple and functional API |
Solid Element | 32,460 | 6 days ago | Library that extends Solid adding Custom Web Components and extensions |
Awesome Web Components / Libraries / Integrations | |||
ember-custom-elements | 15 | about 1 year ago | Render Ember and Glimmer components using custom elements |
preact-custom-element | 365 | 4 months ago | Generate/register a custom element from a preact component |
@adobe/react-webcomponent | 106 | 8 months ago | Automate the wrapping of a React component in a custom element |
nuxt-custom-elements | 80 | 4 days ago | Export your project components as custom elements for integration into external pages |
react-shadow | 1,315 | 5 months ago | Utilise Shadow DOM in React with all the benefits of style encapsulation |
reactify-wc | 176 | over 1 year ago | Use web components with React properties and functions |
remount | 716 | over 1 year ago | Mount React components to the DOM using custom elements |
@riotjs/custom-elements | 35 | 12 days ago | Simple API to create vanilla custom elements with Riot.js |
Awesome Web Components / Libraries / Benchmarks | |||
All the Ways to Make a Web Component | |||
web-components-benchmark | Benchmark Web Components technologies with various examples | ||
web-components-todo | The same todo application built in different Web Components libraries for benchmark purpose | ||
Awesome Web Components / Frameworks / Angular | |||
Angular Elements Overview | |||
Building and consuming Angular Elements as Web Components | |||
How to use Angular ngModel and ngForms with WebComponents | |||
Using Web Components in Angular | |||
Web Components With Angular Ivy In 6 Steps | |||
Awesome Web Components / Frameworks / React | |||
3 Approaches to Integrate React with Custom Elements | |||
Building Interoperable Web Components That Even Work With React | |||
Rendering React Components With Custom Elements | |||
How to use Web Components in React | |||
Using Web Components With Next (or Any SSR Framework) | |||
Awesome Web Components / Frameworks / Vue | |||
Using Web Components in Vue | |||
Awesome Web Components / Frameworks / Svelte | |||
Svelte Custom Element API | |||
How to Create a Web Component in Svelte | |||
Svelte Web Component — 5.4KB | |||
Awesome Web Components / Meta Frameworks | |||
AMP | 14,886 | 22 days ago | Web component framework to easily create user-first experiences for the web |
Enhance | Web standards-based HTML framework for building lightweight web applications | ||
luna-js | 9 | 4 months ago | SSR framework that makes working with the WebComponents standard a breeze |
Rocket | Modern web setup for static sites with a sprinkle of JavaScript | ||
Web Components Compiler | 90 | 6 days ago | Compiler to make server-side rendering of native web components easier |
WebC | 1,329 | over 1 year ago | Framework-independent standalone HTML serializer for generating markup for web components |
Awesome Web Components / Meta Frameworks / Starter Kits | |||
Create Open Web Components | Web component project scaffolding | ||
custom-element-boilerplate | 165 | about 2 months ago | Boilerplate for creating a custom element |
hello-web-components | 26 | 6 days ago | Simple starter hello world web component written in TypeScript |
nutmeg | 115 | 5 months ago | Build, test, and publish vanilla Web Components with a little spice |
Awesome Web Components / Meta Frameworks / Testing Solutions | |||
capybara-shadowdom | 14 | over 1 year ago | Ruby gem that adds basic support for the Shadow DOM to Capybara |
Cypress component tests for Lit | How to run component tests for a Lit web component with Cypress | ||
cypress-lit | 24 | 23 days ago | Test your Lit elements and native web components in Cypress with all the modern browsers |
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 | ||
query-selector-shadow-dom | 242 | 8 months ago | querySelector that can pierce Shadow DOM roots, useful for automated testing |
shadow-automation-selenium | 111 | 8 months ago | Shadow DOM automation using Selenium |
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 | ||
Awesome Web Components / Meta Frameworks / Tools | |||
Backlight | — With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems | ||
Custom Elements Locator | 37 | almost 2 years ago | Chrome extension to find custom elements on a page |
@storybook/web-components | UI development environment for plain web-component snippets | ||
webcomponents.dev | Component IDE for web platform developers | ||
web-component-analyzer | 506 | 12 months ago | CLI that analyzes web components and emits documentation / diagnostics |
Web Components Codemods | 8 | about 1 month ago | Codemods for Web Components |
Awesome Web Components / Books | |||
Web Components in Action | Book by Ben Farrell, available at Manning early release program | ||
Web Component Essentials | Book by Cory Rylan, early preview edition available at Leanpub | ||
Awesome Web Components / Tutorials | |||
Building Web Components with Vanilla JavaScript | |||
Creating a Custom Element from Scratch | |||
Creating a Reusable Avatar Web Component | |||
Creating Web Components with Stencil | |||
Encapsulating Style and Structure with Shadow DOM | |||
Getting started with LitElement and TypeScript | |||
Web Components: from zero to hero | |||
Deep Dive: Web Components & Dependency Injection – The Experiment | |||
Handling data with Web Components | |||
How to use D3js with WebComponents | |||
Navigation Lifecycle using Vaadin Router, LitElement and TypeScript | |||
Recreating The Arduino Pushbutton Using SVG And <lit-element> | |||
Routing Management with LitElement and TypeScript | |||
Snake-Eating Game Making with Web Components of Omi and MVP Architecture | |||
Stencil – Web Components On Steroids | |||
Using Modern Web Components | |||
Using Web Components in WordPress is Easier Than You Think | |||
Web Components 101: Framework Comparison | |||
Web Components 101: Lit Framework | |||
Web Components Tools: A Comparison | |||
Where to begin building Web Components? - The Basics | |||
Where to begin building Web Components? - Class-based Libraries | |||
Awesome Web Components / Insights / Podcasts | |||
Code[ish], episode 38: Building with Web Components | |||
Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM | |||
Labs Talk - Web Components with Peter Muessig | |||
Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald | |||
Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement | |||
Awesome Web Components / Insights / Presentations | |||
Are Web Components the Betamax of web development? | by | ||
Designing Standard Systems | by and | ||
Frontend Architecture for Scalable Design Systems | by | ||
lit-apollo: Data-Driven Components that Use the Platform | by | ||
Mastering Shadow DOM | by | ||
Modernizing Large Frontends with Web Components | by | ||
Shadow DOM: off the beaten track | by | ||
Using Web Components to Build a Framework-agnostic UI Library | by and | ||
Web Components and the AOM | by | ||
Web Components and Styles Scoping | by | ||
Web Components can do that?! | by | ||
Web Components: Introduction and State of the Art | by | ||
Awesome Web Components / Insights / Talks | |||
Better Apps: Delivering Universal UI Patterns as Web Components | by | ||
Custom Web Shadow Elements, or Whatever… | by | ||
Styling and Theming Web Components | by | ||
Web Components at Enterprise Scale | by | ||
Awesome Web Components / Usage Metrics | |||
Chrome Platform Status: CustomElementRegistryDefine | |||
Chrome Platform Status: ElementAttachShadow | |||
Chrome Platform Status: HTMLTemplateElement | |||
Awesome Web Components / Proposals / Form-associated Custom Elements | |||
Form Participation API Explained | Document by Google Chrome team | ||
Form-associated custom elements | Feature in Chrome platform status | ||
web-platform-tests | 5,014 | 3 days ago | |
Awesome Web Components / Proposals / Constructable Stylesheet Objects | |||
Specification Draft | |||
web-platform-tests | 5,014 | 3 days ago | |
Explainer | 138 | about 2 years ago | |
Constructable Stylesheets | Feature in Chrome platform status | ||
Awesome Web Components / Proposals / Custom State Pseudo Class | |||
Blink: Intent to implement | |||
ElementInternals's states property and the :state() pseudo class | 4,389 | 3 months ago | |
Awesome Web Components / Miscellaneous | |||
bruck | 513 | about 1 year ago | Prototyping system built with web components and the Houdini Paint API |
Vaadin Directory | Publish, discuss and rate web components | ||
webcomponents.org | Discuss & share web components | ||
Awesome Web Components / Archive / Polyfills | |||
@webcomponents/custom-elements | 1,146 | about 1 month ago | Custom Elements polyfill by Polymer team |
document-register-element | 1,133 | about 4 years ago | Custom Elements polyfill by Andrea Giammarchi |
@corpuscule/custom-builtin-elements | 12 | about 4 years ago | Customized built-in elements polyfill by |
@ungap/custom-elements-builtin | 104 | over 3 years ago | Customized built-in elements polyfill by |
@webcomponents/shadydom | 1,146 | about 1 month ago | ShadowDOM v1 shim |
@webcomponents/shadycss | 1,146 | about 1 month ago | ShadowDOM style encapsulation shim |
@lwc/synthetic-shadow | 1,638 | 5 days ago | Shadow DOM polyfill by |
@webcomponents/template | 1,146 | about 1 month ago | Minimal polyfill for |
@ungap/import-node | 7 | over 4 years ago | An polyfill for IE11 by |
Awesome Web Components / Archive / History | |||
A history of the HTML slot element | |||
Web Components for Cross-Framework Component Libraries | |||
Web Components in 2019: Part 1 | |||
Web Components in 2019: Part 2 | |||
Web Components in 2019: Part 3 | |||
Web Components in 2019: Part 4 | |||
Developments in Web Components I’m excited about in 2019 | |||
Styling Accessibility: A Web Components Approach | |||
Web Components 101: An Introduction to Web Components | |||
Get started with Vue web components | |||
6 Reasons You Should Use Native Web Components | |||
Web Components in 2018 | |||
Web Components Introduction: Creating Custom HTML Elements in 2018 | |||
Create & Publish Web Components With Vue CLI 3 | |||
Extending Native DOM Elements with Web Components | |||
Styling is critical to web component reuse, but may prove difficult in practice | |||
Web Components: The Long Game | |||
Web Components: Just in the Nick of Time (Polymer Summit 2017) | |||
Using Web Components in Ionic (Polymer Summit 2017) | |||
Web Components for VR (Polymer Summit 2017) | |||
Building UI at Enterprise Scale with Web Components (Polymer Summit 2017) | |||
Custom Elements Everywhere (Polymer Summit 2017) | |||
Evolving the Next Generation of Polymer Elements (Polymer Summit 2017) | |||
Polymer @ YouTube (Polymer Summit 2017) | |||
Web Components for CMS (Polymer Summit 2017) | |||
An intro to web components with otters | |||
The broken promise of Web Components | |||
Regarding the broken promise of Web Components | |||
Web Components v1 - the next generation | |||
Introducing Custom Elements | |||
The Case for Custom Elements: Part 1 | |||
The Case for Custom Elements: Part 2 | |||
Demythstifying Web Components | |||
Extensible web components | |||
Web Component Challenges | |||
Web Components and progressive enhancement | |||
Update on standardizing Shadow DOM and Custom Elements | |||
What's New in Shadow DOM v1 (by examples) | |||
Why web components are so important | |||
Understanding Web Components | |||
Introducing Slot-Based Shadow DOM API | |||
There is an Element for that | |||
What happened to Web Components? | |||
Web Components and their role in the future of web development | |||
Microsoft Edge and Web Components | |||
Bringing componentization to the web: An overview of Web Components | |||
Why Web Components will make the web a better place for our users | |||
Practical Questions around Web Components | |||
The state of Web Components | |||
A No-Nonsense Guide to Web Components, Part 1: The Specs | |||
A No-Nonsense Guide to Web Components, Part 2: Practical Use | |||
Web Components + Backbone: A Game-Changing Combination | |||
Mozilla and Web Components: Update | |||
Server-less applications powered by Web Components | |||
Web Components and the Future of CSS | |||
Easy composition and reuse with Web Components | |||
Let’s build some apps with Polymer! | |||
Polymer: State of the Union | |||
Web Components 101: An Introduction to Fundamental Changes in HTML | |||
Web Components 201: Designing Web Components for Reuse | |||
Why Web Components — Does the Web Really Need Another Component? | |||
“Don’t stop thinking about tomorrow” - AngularJS and Web Components | |||
Multi-device Apps with Web Components | |||
As I Walk Through The Valley Of The Shadow Of DOM | |||
Why Web Components Are Ready For Production | |||
The State of the Componentised Web | |||
An Addendum to Why Web Components Aren't Ready for Production Yet | |||
Why Web Components Aren't Ready for Production... Yet | |||
Component Interop With React And Custom Elements | |||
Accessibility of Web Components | |||
Componentize The Web: Back To The Browser! | |||
Google I/O 2014 - Polymer and the Web Components revolution | |||
Google I/O 2014 - Polymer and Web Components change everything you know about Web development | |||
Google I/O 2014 - Unlock the next era of UI development with Polymer | |||
Making Polymer Elements Accessible | |||
Building an Accessible Disclosure Button – using Web Components | |||
The Road to Web Components | |||
The Web Components Revolution is Here | |||
Web Components: A chance to create the future | |||
Web Component Mashups at 3 a.m. | |||
Web Components Tools & Libraries | |||
Web Components Can Do That?! | |||
Web Components and you – dangers to avoid | |||
HTML as Custom Elements | 259 | about 9 years ago | |
The Web's Declarative, Composable Future | |||
Using Polymer to Create Web Components | |||
The Shadow DOM Diaries | |||
A Detailed Introduction To Custom Elements | |||
A future called Web Components | |||
Building Mobile Web Applications With Brick | |||
Polymer: declarative, encapsulated, and reusable components for the web | |||
Web Components: Why you're already an expert | |||
Yo Polymer: a new way of building web apps | |||
Performance and Custom Elements | |||
Web Components Revolution | |||
A Guide to Web Components | |||
Return of Inspector Web: Web Components a Year Later | |||
Working with Custom Elements | |||
Creating Reusable Markup with The HTML Template Element | |||
Working with Shadow DOM | |||
Breaking Development: Web Components | |||
Web Components: A Tectonic Shift for Web Development - Google I/O 2013 | |||
Web Components: Getting Started | |||
Shadow DOM 101 | |||
Shadow DOM 201 | |||
Shadow DOM 301 | |||
Visualizing shadow DOM concepts | |||
Web components and the future of web development | |||
HTML's New Template Tag | |||
The Basics of the Shadow DOM | |||
Notes on Web Components + ARIA | |||
Google I/O 2012 - The Web Platform's Cutting Edge | |||
Introduction to Web Components | |||
Web Components and Model Driven Views by Alex Russell | |||
What the Heck is Shadow DOM? | |||
Awesome Web Components / Who To Follow | |||
Polymer | |||
Stencil | |||
open-wc.org | |||
webcomponents.dev | |||
Justin Fagnani | |||
Viljami Salminen | |||
Jan Miksovsky | |||
Serhii Kulykov | |||
Awesome Web Components / Maintainers | |||
@mateusortiz | Created by in 2014 | ||
@web-padawan | Maintained by since 2018 |