{"id":45265,"url":"https://github.com/mallickhruday/awesome-custom-elements","name":"awesome-custom-elements","description":"A curated list of awesome Custom Elements, Web Components tools, frameworks, libraries, tutorials, articles and resources.","projects_count":149,"last_synced_at":"2026-08-01T21:00:20.845Z","repository":{"id":206196231,"uuid":"182435739","full_name":"mallickhruday/awesome-custom-elements","owner":"mallickhruday","description":"A curated list of awesome Custom Elements, Web Components tools, frameworks, libraries, tutorials, articles and resources.","archived":false,"fork":false,"pushed_at":"2019-01-14T12:17:21.000Z","size":9,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-07-13T18:05:21.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mallickhruday.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-04-20T17:34:34.000Z","updated_at":"2024-04-03T05:14:54.000Z","dependencies_parsed_at":"2023-11-08T12:32:36.778Z","dependency_job_id":"e7bc41e3-a62e-4856-83b1-950e6f354e80","html_url":"https://github.com/mallickhruday/awesome-custom-elements","commit_stats":null,"previous_names":["mallickhruday/awesome-custom-elements"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mallickhruday/awesome-custom-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallickhruday%2Fawesome-custom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallickhruday%2Fawesome-custom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallickhruday%2Fawesome-custom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallickhruday%2Fawesome-custom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mallickhruday","download_url":"https://codeload.github.com/mallickhruday/awesome-custom-elements/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mallickhruday%2Fawesome-custom-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36170392,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-08-01T02:00:05.789Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-13T21:19:06.127Z","updated_at":"2026-08-01T21:00:20.851Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Libraries and Frameworks","Twitter","Specifications","Guides","Interop","SEO","Presentations","Articles","Podcasts","Web Tools","Components","WebComponents.org","Community","Web Standards","Accessibility"],"sub_categories":["Polymer","Smart HTML Elements","Bosonic","X-Tags","ReactJS","SkateJS","Switzerland"],"readme":"# Awesome Web Components\n\nA curated list of awesome Custom Elements \u0026 Web Components tools, articles and resources. \n\n- [Awesome Custom Elements \u0026 Web Components]\n    - [Specifications](#specifications)\n    - [Web Standards](#web-standards)\n    - [Guides](#guides)\n    - [Interop](#interop)\n    - [SEO](#seo)\n    - [Acessibility](#acessibility)\n    - [Presentations](#presentations)\n    - [Articles](#articles)\n    - [Podcasts](#podcasts)\n    - [Web Tools](#web-tools)\n    - [Libraries and Frameworks](#libraries-and-frameworks)\n        - [Bosonic](#bosonic)\n        - [X-tags](#x-tags)\n        - [Polymer](#polymer)\n        - [ReactJS](#reactjs)\n        - [SkateJS](#skatejs)\n        - [Aurelia](#aurelia)\n        - [Switzerland](#switzerland)\n    - [Components](#components)\n    - [WebComponents.org](#webcomponentsorg)\n    - [Community](#community)\n    - [Twitter](#twitter)\n    - [Contributing](#contributing)\n\n## Specifications\n\n*Specifications of Web Components*\n\n* [Official Custom Elements Spec](http://w3c.github.io/webcomponents/spec/custom/)\n* [Official HTML Imports Spec](http://w3c.github.io/webcomponents/spec/imports/)\n* [Official Templates  Spec](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)\n* [Official Shadow DOM Spec](http://w3c.github.io/webcomponents/spec/shadow/)\n\n## Web Standards\n\n*Resources about the web standards under Web Components*\n\n* [Intro to Shadow DOM](http://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966) by Agraj Mangal.\n* [Custom Elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) by Eric Bidelman.\n* [Can I use Web Components?](http://caniuse.com/#search=web%20components).\n* [Introduction to HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/) by Eiji Kitamura.\n* [Best Practice for Creating Custom Elements](http://www.broken-links.com/2015/01/27/best-practice-creating-custom-elements/).\n\n## Guides\n\n*Guides about Web Components*\n\n* [A Guide to Web Components](https://css-tricks.com/modular-future-web-components/) by Rob Dodson.\n* [How to Create Your Own HTML Elements With Web Components](http://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524) by Kezz Bracey.\n* [Web Components é uma Revolução? (pt-br)](http://www.akitaonrails.com/2014/07/06/web-components-e-uma-revolucao#.VULzLNNVhBe) by Akita.\n* [Web Components: Introdução (pt-br)](http://tableless.com.br/web-components-introducao/) by Diego Eis.\n* [EXTENDING THE WEB WITH COMPONENTS](http://html5hub.com/extending-the-web-with-components/#i.1in3tsi34tfhwy) by Martin Naumann.\n* [Web Components](http://blog.romanliutikov.com/post/62104274790/web-components)\n* [A Guide to Styling Elements](https://www.polymer-project.org/0.5/articles/styling-elements.html) by Eric Bidelman .\n\n## Interop\n\n*Interoperabilty of Web Components*\n\n* [Here’s the difference between Polymer and Angular](http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/) by Alex Mingoia.\n* [The roles of AngularJS and Polymer](http://www.2ality.com/2014/07/angularjs-vs-polymer.html) by Dr. Axel Rauschmayer.\n* [Plans for supporting Web Components in AngularJS and Ember.js](http://www.2ality.com/2013/05/web-components-angular-ember.html) by Dr. Axel Rauschmayer.\n* [Angular Custom Element](https://github.com/dgs700/angular-custom-element) by David Shapiro.\n* [Integrating Web Components with AngularJS](http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/) by Pascal Precht.\n* [View Encapsulation in Angular 2](http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html) by Pascal Precht.\n* [Creating Container Components, Part 3: Angular 2 Component Directives](https://www.airpair.com/angularjs/posts/creating-components-p3-angular2-directives) by Kara Erickson\n* [A Bet on Web Components and Ember.Component Synchronicity](http://pixelhandler.com/posts/a-bet-on-web-components-and-embercomponent-synchronicity) by pixelhandler\n* [Web Components in Angular, Ember, and React.](http://cbateman.com/blog/web-components-in-angular-ember-and-react/) by Chris Bateman\n* [Using Polymer WebComponents with Angular.js](http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/) by Josh Crowther\n\n## SEO\n\n*SEO and Web Components*\n\n* [Introducing Web Components and What It Means for Search Engine Optimization and Privacy](https://medium.com/cool-code-pal/introducing-web-components-and-what-it-means-for-search-engine-optimization-and-privacy-b21bfc1f63c7).\n\n## Accessibility\n\n*Accessibility and Web Components*\n\n* [Accessibility of Web Components](http://webcomponents.org/presentations/accessibility-of-web-components-at-jsconf-us/) by Marcy Sutton.\n* [Accessible Web Components](https://www.polymer-project.org/0.5/articles/accessible-web-components.html) by By Addy Osmani and Alice Boxhall.\n* [Notes on Web Components + ARIA](http://www.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/) by Steve Faulkner.\n* [Making Polymer Elements Accessible](http://webcomponents.org/presentations/making-polymer-elements-accessible/) by Alice Boxhall.\n* [On the accessibility of web components. Again.](http://www.brucelawson.co.uk/2014/on-the-accessibility-of-web-components-again/) by Bruce Lawson\n\n## Presentations\n\n*Some presentations about Web Components*\n\n* [Web Components: A chance to create the future](https://www.youtube.com/watch?v=JUzjr1bIRUg) by Zeno Rocha.\n* [Web Components Shift: a tectonic shift for web development](http://www.webcomponentsshift.com/#1) by Eric Bidelman.\n* [Real World Web components](http://pt.slideshare.net/JarrodOverson/real-world-web-components) by Jarrod Overson.\n* [Introduction to Web Components](http://slides.com/jasonmayes/introduction-to-web-components#/) by Jason Mayes.\n* [Componentizando a Web com Polymer (pt-br)](http://www.slideshare.net/horochovec/componentizando-a-web-com-polymer) by Stefan Horochovec.\n* [Polymer: building modern apps on web components](http://html5-demos.appspot.com/static/polymer/index.html#1) by Eric Bidelman.\n* [Desmistificando o Polymer (pt-br)](https://www.youtube.com/watch?v=Lf-n6d7hfPs) by Beto Muniz.\n* [Polymer Elements: Tudo que você precisa saber para criar a web (pt-br)](https://speakerdeck.com/obetomuniz/polymer-elements-tudo-que-voce-precisa-saber-para-criar-a-web) by Beto Muniz.\n* [WebApps com Web Components (pt-br)](https://speakerdeck.com/obetomuniz/webapps-com-web-components) by Beto Muniz.\n* [Web Components, A próxima revolução do desenvolvimento web (pt-br)](https://speakerdeck.com/obetomuniz/web-components-a-proxima-revolucao-do-desenvolvimento-web) by Beto Muniz.\n* [Tudo que você precisa saber para iniciar com Polymer e Webcomponents (pt-br)](https://www.youtube.com/watch?v=CwiTIYBUHTY) by GDG Belo Horizonte.\n* [Polymer and modern web APIs: In production at Google scale](http://webcomponents.org/presentations/polymer-and-modern-web-apis-at-google-io/)\n* [What are Custom Elements?](http://webcomponents.org/presentations/what-are-custom-elements/)\n* [The cure for your Web Components hangover](http://webcomponents.org/presentations/the-cure-for-your-web-components-hangover-at-jquery-uk/)\n* [Why you should be using Web Components now. And how.](http://webcomponents.org/presentations/why-you-should-be-using-web-components-and-how-at-devweek/)\n* [The Road to Native Web Components](http://www.modernwebui.org/category/web-components/)\n\n## Articles\n\n*Articles about Web Components*\n\n* [Why Web Components Aren’t Ready for Production… Yet](http://developer.telerik.com/featured/web-components-arent-ready-production-yet/) by TJ VanToll.\n* [Why Web Components Are Ready For Production](http://developer.telerik.com/featured/web-components-ready-production/) by TJ VanToll.\n* [The State of the Componentised Web](http://www.futureinsights.com/home/the-state-of-the-componentised-web.html) by Ian Murphy.\n* [Shadow DOM CSS Cheat Sheet](http://robdodson.me/shadow-dom-css-cheat-sheet/) by Rob Dodson.\n* [Web Components – The Future Web](http://thejackalofjavascript.com/web-components-future-web/) by Arvind Ravulavaru.\n* [Web Components! Hoje!](http://betomuniz.com/blog/web-components-hoje/) by Beto Muniz.\n* [Desmistificando o Polymer: Olá Polymer! (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-1/) by Beto Muniz.\n* [Desmistificando o Polymer: Porque o Polymer? (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-2/) by Beto Muniz.\n* [Desmistificando o Polymer: Polymer FAQ (unoffical) (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-3/) by Beto Muniz.\n* [Discoverability for Web Components](https://medium.com/@zenorocha/discoverability-for-web-components-72ce29f128b2) by Zeno Rocha.\n* [Why Web Components?](http://webcomponents.org/articles/why-web-components/) by Zeno Rocha and Addy Osmani.\n* [Extending Styles](http://philipwalton.com/articles/extending-styles/) by Philip Walton.\n* [What happened to Web Components?](http://www.2ality.com/2015/08/web-component-status.html)\n* [Pros and Cons of Facebook's React vs. Web Components (Polymer)](http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)\n\n\n## Podcasts\n\n*Podcasts about Web Components*\n\n* [WebComponents.org Podcasts](http://webcomponents.org/podcasts/)\n* [Polymer Podcasts](http://www.polymerpodcast.com/)\n\n## Web Tools\n\n*Some web tools related to Web Components*\n\n* [Web Reflection: A W3C Custom Elements Alternative](http://webreflection.blogspot.com.br/2014/07/a-w3c-custom-elements-alternative.html) by Web Reflection.\n* [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/).\n* [Vulcanize](https://github.com/Polymer/vulcanize) by Polymer Project.\n* [Web Components Tester](https://github.com/Polymer/web-component-tester) by Polymer Project.\n* [Element Generator for Slush](https://github.com/webcomponents/slush-element) by WebComponents.org.\n* [Element Generator for Yeoman](https://github.com/webcomponents/generator-element) by WebComponents.org.\n* [webcomponents.js](http://webcomponents.org/polyfills/) by WebComponents.org.\n* [Ele](https://ele.io/).\n* [CustomElements.io](http://customelements.io/).\n* [Component Kitchen](http://component.kitchen/).\n* [Web Components Weekly](http://webcomponentsweekly.me/) by Mateus Ortiz.\n\n## Libraries and Frameworks\n\n*Libraries and frameworks related with Web Components*\n\n### Polymer\n\n* [Polymer Project](https://www.polymer-project.org) by Google.\n* [Join the Web Components revolution with Polymer](http://www.ibm.com/developerworks/library/wa-polymer/) by Sing Li.\n* [Introduction to Polymer: The Next Generation of Web Development](https://www.youtube.com/watch?v=8-Zq2KUN6jM) by Matthew McNulty.\n* [Unlock the next era of UI development with Polymer](https://www.youtube.com/watch?v=HKrYfrAzqFA) by Rob Dodson.\n* [Polymer and the Web Components revolution](https://www.youtube.com/watch?v=yRbOSdAe_JU) by Matt McNulty.\n* [Polymer and Web Components change everything you know about Web development](https://www.youtube.com/watch?v=8OJ7ih8EE7s) by Eric Bidelman.\n* [Using Polymer to Create Web Components](http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475) by Rey Bango.\n* [Sharing Polymer Components: Part 1](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-1--cms-21264) by Rey Bango.\n* [Sharing Polymer Components: Part 2](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-2--cms-21497) by Rey Bango.\n* [Inheritance and composition with Polymer](http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/) by Pascal Precht.\n* [Creating responsive UIs](https://www.youtube.com/watch?v=svfu9iQ8cyg\u0026feature=youtu.be) by Rob Dodson.\n* [Making Web Components accessible](https://www.youtube.com/watch?v=_IBiXfxhF-A) by Alice Boxhall.\n* [Hello Polymer: Q\u0026A with Google’s Polymer team](http://www.2ality.com/2013/07/hello-polymer.html) by Dr. Axel Rauschmayer.\n* [Google’s Polymer and the future of web UI frameworks](http://www.2ality.com/2013/05/google-polymer.html) by Dr. Axel Rauschmayer.\n* [What polymer and angular tell us about the future success of the web platform and javascript frameworks](http://blog.testdouble.com/posts/2013-06-26-what-polymer-and-angular-tell-us-about-the-future-success-of-the-web-platform-and-javascript-frameworks.html).\n* [The Polymer approach to building single page applications](https://www.polymer-project.org/0.5/articles/spa.html) by Eric Bidelman.\n* [PolymerSnippets](https://github.com/robdodson/PolymerSnippets) by Rob Dodson.\n* [Creating a Polymer Chat App with Material Design](http://www.pubnub.com/blog/creating-a-polymer-chat-app-with-material-design/) by Tomomi Imura.\n* [Polymer Generator for Yeoman](https://github.com/yeoman/generator-polymer/).\n* [Built with Polymer](http://builtwithpolymer.org/).\n* [Awesome Polymer](https://github.com/Granze/awesome-polymer) by Maurizio Mangione. :guitar:\n\n### Bosonic\n\n* [Bosonic Site](http://bosonic.github.io/).\n\n### X-Tags\n\n* [X-tags Site](http://www.x-tags.org/) by Mozilla.\n* [Brick](http://brick.mozilla.io/) by Mozilla.\n\n### ReactJS\n\n* [Keo](https://github.com/Wildhoney/Keo) for Shadow DOM.\n* [Standalone](https://github.com/Wildhoney/Standalone) for Custom Elements.\n\n### SkateJS\n\n* [SkateJS Repo](https://github.com/skatejs/skatejs)\n\n### Aurelia\n\n* [Aurelia Site](http://aurelia.io/).\n\n### Switzerland\n\n* [Switzerland](https://github.com/Wildhoney/Switzerland)\n\n### Smart HTML Elements\n\n* [Smart HTML Elements](https://htmlelements.com/)\n\n\n## Components\n\n*Some Web Components*\n\n* [Github Time Elements](https://github.com/github/time-elements) by GitHub.\n* [Router Manager](https://github.com/erikringsmuth/app-router) by Erik Ringsmuth.\n* [Polymer Elements Catalog](https://elements.polymer-project.org/)\n* [Responsive Embed](https://github.com/joselitojunior/responsive-embed) by Joselito Júnior\n\n## WebComponents.org\n\n*A [WebComponents.org](http://webcomponents.org/) selection*\n\n* Hello World's\n    * [Using Polymer](https://github.com/webcomponents/hello-world-polymer).\n    * [Using X-Tags](https://github.com/webcomponents/hello-world-xtag).\n    * [Using VanillaJS](https://github.com/webcomponents/hello-world-element).\n* Boilerplates\n    * [Using Polymer](https://github.com/webcomponents/polymer-boilerplate).\n    * [Using X-Tags](https://github.com/webcomponents/x-tag-boilerplate).\n    * [Using VanillaJS](https://github.com/webcomponents/element-boilerplate).\n* [Podcasts](http://webcomponents.org/podcasts/).\n* [Articles](http://webcomponents.org/articles/).\n* [Presentations](http://webcomponents.org/presentations/).\n* [Github](https://github.com/webcomponents).\n\n## Community\n\n*Events, Meetups, etc.*\n\n* [Belo Horizonte - Web Components \u0026 Polymer Meetup](http://www.meetup.com/Web-Components-Polymer-Belo-Horizonte/)\n* [Buenos Aires - Web Components Meetup](http://www.meetup.com/Web-Components-BA)\n* [Paris - Web Components Meetup](http://www.meetup.com/paris-webComponents)\n* [London - Web Components Meetup](http://www.meetup.com/web-components-meetup)\n* [Madrid - Polymer Meetup](http://www.meetup.com/Madrid-Polymer-Group)\n* [Washington, DC - Polymer Meetup](http://www.meetup.com/polymer-dc)\n* [Washington, DC - Web Components Meetup](http://www.meetup.com/DC-Web-Components)\n* [Los Angeles - Web Components Meetup](http://www.meetup.com/Web-Components-LA)\n* [Melbourne - Polymer Meetup](http://www.meetup.com/Melbourne-Polymer-Meetup)\n* [GDG PolymerMexico!](http://www.meetup.com/PolymerMex)\n* [Polymer Summit](https://www.polymer-project.org/summit)\n\n## Twitter\n\n*Who to follow*\n\n* [@polymer](https://twitter.com/polymer)\n* [@web_components](https://twitter.com/web_components)\n* [@ebidel](https://twitter.com/ebidel)\n* [@jkomoros](https://twitter.com/jkomoros)\n* [@zenorocha](https://twitter.com/zenorocha)\n* [@addyosmani](https://twitter.com/addyosmani)\n* [@PascalPrecht](https://twitter.com/PascalPrecht)\n* [@csuwildcat](https://twitter.com/csuwildcat)\n* [@rob_dodson](https://twitter.com/rob_dodson)\n* [@sindresorhus](https://twitter.com/sindresorhus)\n* [@eduardolundgren](https://twitter.com/eduardolundgren)\n* [@djalmaaraujo](https://twitter.com/djalmaaraujo)\n* [@passy](https://twitter.com/passy)\n* [@djalmaaraujo](https://twitter.com/djalmaaraujo)\n* [@Nevraeka](https://twitter.com/Nevraeka)\n* [@nevir](https://twitter.com/nevir)\n* [@keanulee](https://twitter.com/cironunes)\n* [@obetomuniz](https://twitter.com/obetomuniz)\n\n## Contributing\n\nYour contributions are always welcome!\n\n\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/mallickhruday%2Fawesome-custom-elements/projects"}