Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/obetomuniz/awesome-webcomponents

A curated list of awesome Web Components tools, articles and resources.
https://github.com/obetomuniz/awesome-webcomponents

List: awesome-webcomponents

awesome-list webcomponents

Last synced: 4 days ago
JSON representation

A curated list of awesome Web Components tools, articles and resources.

Awesome Lists containing this project

README 

        
# Awesome Web Components



A curated list of awesome Web Components tools, articles and resources. 



- [Awesome Web Components](#awesome-web-components)

    - [Specifications](#specifications)

    - [Web Standards](#web-standards)

    - [Guides](#guides)

    - [Interop](#interop)

    - [SEO](#seo)

    - [Accessibility](#accessibility)

    - [Presentations](#presentations)

    - [Articles](#articles)

    - [Podcasts](#podcasts)

    - [Web Tools](#web-tools)

    - [Libraries and Frameworks](#libraries-and-frameworks)

        - [Polymer](#polymer)

        - [Slim-JS](#slimjs)

        - [Bosonic](#bosonic)

        - [X-Tags](#x-tags)

        - [ReactJS](#reactjs)

        - [SkateJS](#skatejs)

        - [Aurelia](#aurelia)

        - [Switzerland](#switzerland)

        - [VueJS](#vuejs)

        - [Mithril](#mithril)

        - [Angular](#angular)

        - [Stencil.js](#stenciljs)

        - [ComponentForge](#ComponentForge)

    - [Components](#components)

    - [WebComponents.org](#webcomponentsorg)

    - [Community](#community)

    - [Twitter](#twitter)

    - [Contributing](#contributing)

    - [License](#license)



## Specifications



*Specifications of Web Components*



* [Official Custom Elements Spec](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements)

* [Official HTML Imports Spec](https://www.w3.org/TR/html-imports/)

* [Official Templates  Spec](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)

* [Official Shadow DOM Spec](https://www.w3.org/TR/shadow-dom/)



## Web Standards



*Resources about the web standards under Web Components*



* [Web Components 101: What are Web Components?](https://nhswd.com/blog/web-components-101-what-are-web-components)

* [Intro to Shadow DOM](http://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966) by Agraj Mangal.

* [Custom Elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) by Eric Bidelman.

* [Can I use Web Components?](http://caniuse.com/#search=web%20components).

* [Introduction to HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/) by Eiji Kitamura.

* [Best Practice for Creating Custom Elements](http://www.broken-links.com/2015/01/27/best-practice-creating-custom-elements/).



## Guides



*Guides about Web Components*



* [Tutorial: How to create a Web Component?](https://nhswd.com/blog/web-components-101-tutorial-how-to-create-a-web-component)

* [A Guide to Web Components](https://css-tricks.com/modular-future-web-components/) by Rob Dodson.

* [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.

* [Web Components é uma Revolução? (pt-br)](http://www.akitaonrails.com/2014/07/06/web-components-e-uma-revolucao#.VULzLNNVhBe) by Akita.

* [Web Components: Introdução (pt-br)](http://tableless.com.br/web-components-introducao/) by Diego Eis.

* [EXTENDING THE WEB WITH COMPONENTS](http://html5hub.com/extending-the-web-with-components/#i.1in3tsi34tfhwy) by Martin Naumann.

* [Web Components](http://blog.romanliutikov.com/post/62104274790/web-components)

* [A Guide to Styling Elements](https://www.polymer-project.org/0.5/articles/styling-elements.html) by Eric Bidelman .

* [Web Components in Action (book)](https://www.manning.com/books/web-components-in-action) by Ben Farrell.



## Interop



*Interoperabilty of Web Components*



* [Here’s the difference between Polymer and Angular](http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/) by Alex Mingoia.

* [The roles of AngularJS and Polymer](http://www.2ality.com/2014/07/angularjs-vs-polymer.html) by Dr. Axel Rauschmayer.

* [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.

* [Angular Custom Element](https://github.com/dgs700/angular-custom-element) by David Shapiro.

* [Integrating Web Components with AngularJS](http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/) by Pascal Precht.

* [View Encapsulation in Angular 2](http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html) by Pascal Precht.

* [Creating Container Components, Part 3: Angular 2 Component Directives](https://www.airpair.com/angularjs/posts/creating-components-p3-angular2-directives) by Kara Erickson

* [A Bet on Web Components and Ember.Component Synchronicity](http://pixelhandler.com/posts/a-bet-on-web-components-and-embercomponent-synchronicity) by pixelhandler

* [Web Components in Angular, Ember, and React.](http://cbateman.com/blog/web-components-in-angular-ember-and-react/) by Chris Bateman

* [Using Polymer WebComponents with Angular.js](http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/) by Josh Crowther



## SEO



*SEO and Web Components*



* [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).



## Accessibility



*Accessibility and Web Components*



* [Accessibility of Web Components](http://webcomponents.org/presentations/accessibility-of-web-components-at-jsconf-us/) by Marcy Sutton.

* [Accessible Web Components](https://www.polymer-project.org/0.5/articles/accessible-web-components.html) by By Addy Osmani and Alice Boxhall.

* [Notes on Web Components + ARIA](http://www.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/) by Steve Faulkner.

* [Making Polymer Elements Accessible](http://webcomponents.org/presentations/making-polymer-elements-accessible/) by Alice Boxhall.

* [On the accessibility of web components. Again.](http://www.brucelawson.co.uk/2014/on-the-accessibility-of-web-components-again/) by Bruce Lawson



## Presentations



*Some presentations about Web Components*



* [Web Components: A chance to create the future](https://www.youtube.com/watch?v=JUzjr1bIRUg) by Zeno Rocha.

* [Web Components Shift: a tectonic shift for web development](http://www.webcomponentsshift.com/#1) by Eric Bidelman.

* [Real World Web components](http://pt.slideshare.net/JarrodOverson/real-world-web-components) by Jarrod Overson.

* [Introduction to Web Components](http://slides.com/jasonmayes/introduction-to-web-components#/) by Jason Mayes.

* [Componentizando a Web com Polymer (pt-br)](http://www.slideshare.net/horochovec/componentizando-a-web-com-polymer) by Stefan Horochovec.

* [Polymer: building modern apps on web components](http://html5-demos.appspot.com/static/polymer/index.html#1) by Eric Bidelman.

* [Desmistificando o Polymer (pt-br)](https://www.youtube.com/watch?v=Lf-n6d7hfPs) by Beto Muniz.

* [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.

* [WebApps com Web Components (pt-br)](https://speakerdeck.com/obetomuniz/webapps-com-web-components) by Beto Muniz.

* [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.

* [Tudo que você precisa saber para iniciar com Polymer e Webcomponents (pt-br)](https://www.youtube.com/watch?v=CwiTIYBUHTY) by GDG Belo Horizonte.

* [Polymer and modern web APIs: In production at Google scale](http://webcomponents.org/presentations/polymer-and-modern-web-apis-at-google-io/)

* [What are Custom Elements?](http://webcomponents.org/presentations/what-are-custom-elements/)

* [The cure for your Web Components hangover](http://webcomponents.org/presentations/the-cure-for-your-web-components-hangover-at-jquery-uk/)

* [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/)

* [The Road to Native Web Components](http://www.modernwebui.org/category/web-components/)

* [Componentes como peças de lego](https://www.youtube.com/watch?v=EW7cw96h0LQ) by Diego Haz

* [Rip Your Player's Face Off](https://www.youtube.com/watch?v=N6Mh84SRoDg&ab_channel=Demuxed) by Steve Heffernan



## Articles



*Articles about Web Components*



* [Why use Web Components?](https://nhswd.com/blog/web-components-101-tutorial-why-use-web-components)

* [Web Components expert articles](https://nhswd.com/blog/category/web-components)

* [Why Web Components Aren’t Ready for Production… Yet](http://developer.telerik.com/featured/web-components-arent-ready-production-yet/) by TJ VanToll.

* [Why Web Components Are Ready For Production](http://developer.telerik.com/featured/web-components-ready-production/) by TJ VanToll.

* [The State of the Componentised Web](http://www.futureinsights.com/home/the-state-of-the-componentised-web.html) by Ian Murphy.

* [Shadow DOM CSS Cheat Sheet](http://robdodson.me/shadow-dom-css-cheat-sheet/) by Rob Dodson.

* [Web Components – The Future Web](http://thejackalofjavascript.com/web-components-future-web/) by Arvind Ravulavaru.

* [Web Components! Hoje!](http://betomuniz.com/blog/web-components-hoje/) by Beto Muniz.

* [Desmistificando o Polymer: Olá Polymer! (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-1/) by Beto Muniz.

* [Desmistificando o Polymer: Porque o Polymer? (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-2/) by Beto Muniz.

* [Desmistificando o Polymer: Polymer FAQ (unofficial) (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-3/) by Beto Muniz.

* [Discoverability for Web Components](https://medium.com/@zenorocha/discoverability-for-web-components-72ce29f128b2) by Zeno Rocha.

* [Why Web Components?](http://webcomponents.org/articles/why-web-components/) by Zeno Rocha and Addy Osmani.

* [Extending Styles](http://philipwalton.com/articles/extending-styles/) by Philip Walton.

* [What happened to Web Components?](http://www.2ality.com/2015/08/web-component-status.html)

* [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)

* [HTML, the Hero of the Web](https://www.mux.com/blog/html-the-hero-of-the-web) by Wesley Luyten



## Podcasts



*Podcasts about Web Components*



* [WebComponents.org Podcasts](http://webcomponents.org/podcasts/)

* [Polymer Podcasts](http://www.polymerpodcast.com/)



## Web Tools



*Some web tools related to Web Components*



* [WebComponents.dev](https://webcomponents.dev/) — in-browser IDE to code web components in isolation with 58 templates available, supporting stories and tests.

* [Backlight](https://backlight.dev/) — 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. 

* [Web Component DevTools](https://matsuuu.github.io/web-component-devtools/) Browser extension improving debugging web components

* [Web Reflection: A W3C Custom Elements Alternative](http://webreflection.blogspot.com.br/2014/07/a-w3c-custom-elements-alternative.html) by Web Reflection.

* [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/).

* [Vulcanize](https://github.com/Polymer/vulcanize) by Polymer Project.

* [Web Components Tester](https://github.com/Polymer/web-component-tester) by Polymer Project.

* [Element Generator for Slush](https://github.com/webcomponents/slush-element) by WebComponents.org.

* [Element Generator for Yeoman](https://github.com/webcomponents/generator-element) by WebComponents.org.

* [webcomponents.js](http://webcomponents.org/polyfills/) by WebComponents.org.

* [Ele](https://ele.io/).

* [CustomElements.io](http://customelements.io/).

* [Component Kitchen](http://component.kitchen/).

* [Web Components Weekly](http://webcomponentsweekly.me/) by Mateus Ortiz.



## Libraries and Frameworks



*Libraries and frameworks related with Web Components*



### Polymer



* [Polymer Project](https://www.polymer-project.org) by Google.

* [Join the Web Components revolution with Polymer](http://www.ibm.com/developerworks/library/wa-polymer/) by Sing Li.

* [Introduction to Polymer: The Next Generation of Web Development](https://www.youtube.com/watch?v=8-Zq2KUN6jM) by Matthew McNulty.

* [Unlock the next era of UI development with Polymer](https://www.youtube.com/watch?v=HKrYfrAzqFA) by Rob Dodson.

* [Polymer and the Web Components revolution](https://www.youtube.com/watch?v=yRbOSdAe_JU) by Matt McNulty.

* [Polymer and Web Components change everything you know about Web development](https://www.youtube.com/watch?v=8OJ7ih8EE7s) by Eric Bidelman.

* [Using Polymer to Create Web Components](http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475) by Rey Bango.

* [Sharing Polymer Components: Part 1](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-1--cms-21264) by Rey Bango.

* [Sharing Polymer Components: Part 2](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-2--cms-21497) by Rey Bango.

* [Inheritance and composition with Polymer](http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/) by Pascal Precht.

* [Creating responsive UIs](https://www.youtube.com/watch?v=svfu9iQ8cyg&feature=youtu.be) by Rob Dodson.

* [Making Web Components accessible](https://www.youtube.com/watch?v=_IBiXfxhF-A) by Alice Boxhall.

* [Hello Polymer: Q&A with Google’s Polymer team](http://www.2ality.com/2013/07/hello-polymer.html) by Dr. Axel Rauschmayer.

* [Google’s Polymer and the future of web UI frameworks](http://www.2ality.com/2013/05/google-polymer.html) by Dr. Axel Rauschmayer.

* [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).

* [The Polymer approach to building single page applications](https://www.polymer-project.org/0.5/articles/spa.html) by Eric Bidelman.

* [PolymerSnippets](https://github.com/robdodson/PolymerSnippets) by Rob Dodson.

* [Creating a Polymer Chat App with Material Design](http://www.pubnub.com/blog/creating-a-polymer-chat-app-with-material-design/) by Tomomi Imura.

* [Polymer Generator for Yeoman](https://github.com/yeoman/generator-polymer/).

* [Built with Polymer](http://builtwithpolymer.org/).

* [Awesome Polymer](https://github.com/Granze/awesome-polymer) by Maurizio Mangione. :guitar:



### Bosonic



* [Bosonic Site](http://bosonic.github.io/).



### X-Tags



* [X-tags Site](http://www.x-tags.org/) by Mozilla.

* [Brick](http://brick.mozilla.io/) by Mozilla.



### Slim-JS



* [Slim-JS Documentation](http://slimjs.com)

* [Git repository](https://github.com/eavichay/slim.js)



### ReactJS



* [Keo](https://github.com/Wildhoney/Keo) for Shadow DOM.

* [Standalone](https://github.com/Wildhoney/Standalone) for Custom Elements.



### SkateJS



* [SkateJS Repo](https://github.com/skatejs/skatejs)



### Aurelia



* [Aurelia Site](http://aurelia.io/).



### Switzerland



* [Switzerland](https://github.com/Wildhoney/Switzerland)



### VueJS



* [VueJS](https://github.com/vuejs) Main Repository



### Mithril



* [Mithril](https://mithril.js.org) Main Repository



### Angular 



* [Angular](https://angularjs.org/) Main Repository



### Stencil.js 



* [Stencil.js site](https://stenciljs.com/)

* [Git repository](https://github.com/ionic-team/stencil)

* [AnywhereUI](https://github.com/adaleks/anywhere-ui)



### ComponentForge



* [ComponentForge site](https://componentForge.up.railway.app/)

* [Git repository](https://github.com/darshanmarathe/componentForge)

* [Web components built with ComponentForge](https://dm-cf-components.netlify.app/)

* [Wny i wrote ComponentForge](https://medium.com/@darshanmarathe/why-i-wrote-my-own-web-component-framework-ComponentForge-8a8a2f7ca578)



### Bit



* [Bit](https://github.com/teambit/bit) component development, reuse and collaboration tool



### NuML



* [NuML site & storybook](https://numl.design) style-oriented framework and design system

* [NuML repository](https://github.com/tenphi/numl)



### Lego



* [Lego site](https://lego.js.org) native web-components made light and reactive

* [Lego repository](https://github.com/Polight/lego)



## Components



*Some Web Components*



* [Github Time Elements](https://github.com/github/time-elements) by GitHub.

* [Router Manager](https://github.com/erikringsmuth/app-router) by Erik Ringsmuth.

* [Polymer Elements Catalog](https://elements.polymer-project.org/)

* [Responsive Embed](https://github.com/joselitojunior/responsive-embed) by Joselito Júnior

* [Media Chrome (Custom Elements for Media UIs)](https://github.com/muxinc/media-chrome) by Mux, Inc.

* [Mux Open Elements (Custom Elements for Media)](https://github.com/muxinc/elements) by Mux, Inc.

* [ComponentForge Web Components](https://dm-cf-components.netlify.app/) by Darshan Marathe.

* [Image Display Control](https://github.com/Frameright/image-display-control-web-component) by Frameright.



## WebComponents.org



*A [WebComponents.org](http://webcomponents.org/) selection*



* Hello World's

    * [Using Polymer](https://github.com/webcomponents/hello-world-polymer).

    * [Using X-Tags](https://github.com/webcomponents/hello-world-xtag).

    * [Using VanillaJS](https://github.com/webcomponents/hello-world-element).

* Boilerplates

    * [Using Polymer](https://github.com/webcomponents/polymer-boilerplate).

    * [Using X-Tags](https://github.com/webcomponents/x-tag-boilerplate).

    * [Using VanillaJS](https://github.com/webcomponents/element-boilerplate).

* [Podcasts](http://webcomponents.org/podcasts/).

* [Articles](http://webcomponents.org/articles/).

* [Presentations](http://webcomponents.org/presentations/).

* [Github](https://github.com/webcomponents).



## Community



*Events, Meetups, etc.*



* [Buenos Aires - Web Components Meetup](http://www.meetup.com/Web-Components-BA)

* [Paris - Web Components Meetup](http://www.meetup.com/paris-webComponents)

* [London - Web Components Meetup](http://www.meetup.com/web-components-meetup)

* [Madrid - Polymer Meetup](http://www.meetup.com/Madrid-Polymer-Group)

* [Washington, DC - Polymer Meetup](http://www.meetup.com/polymer-dc)

* [Washington, DC - Web Components Meetup](http://www.meetup.com/DC-Web-Components)

* [Los Angeles - Web Components Meetup](http://www.meetup.com/Web-Components-LA)

* [Melbourne - Polymer Meetup](http://www.meetup.com/Melbourne-Polymer-Meetup)

* [GDG PolymerMexico!](http://www.meetup.com/PolymerMex)

* [Polymer Summit](https://www.polymer-project.org/summit)



## Twitter



*Who to follow*



* [@polymer](https://twitter.com/polymer)

* [@web_components](https://twitter.com/web_components)

* [@buildWithLit](https://twitter.com/buildWithLit)



## Contributing



Your contributions are always welcome!



## License



[MIT License](http://betomuniz.mit-license.org) © Beto Muniz



## Inspiration



This list was inspired by [awesome-go](https://github.com/avelino/awesome-go) and [awesome-python](https://github.com/avelino/awesome-python).