A curated list of awesome Web Components tools, articles and resources. Inspired by awesome-go and awesome-python.
Specifications of Web Components
- Official Custom Elements Spec
- Official HTML Imports Spec
- Official Templates Spec
- Official Shadow DOM Spec
Resources about the web standards under Web Components
- Web Components 101: What are Web Components?
- Intro to Shadow DOM by Agraj Mangal.
- Custom Elements by Eric Bidelman.
- Can I use Web Components?.
- Introduction to HTML Imports by Eiji Kitamura.
- Best Practice for Creating Custom Elements.
Guides about Web Components
- Tutorial: How to create a Web Component?
- A Guide to Web Components by Rob Dodson.
- How to Create Your Own HTML Elements With Web Components by Kezz Bracey.
- Web Components é uma Revolução? (pt-br) by Akita.
- Web Components: Introdução (pt-br) by Diego Eis.
- EXTENDING THE WEB WITH COMPONENTS by Martin Naumann.
- Web Components
- A Guide to Styling Elements by Eric Bidelman .
- Web Components in Action (book) by Ben Farrell.
Interoperabilty of Web Components
- Here’s the difference between Polymer and Angular by Alex Mingoia.
- The roles of AngularJS and Polymer by Dr. Axel Rauschmayer.
- Plans for supporting Web Components in AngularJS and Ember.js by Dr. Axel Rauschmayer.
- Angular Custom Element by David Shapiro.
- Integrating Web Components with AngularJS by Pascal Precht.
- View Encapsulation in Angular 2 by Pascal Precht.
- Creating Container Components, Part 3: Angular 2 Component Directives by Kara Erickson
- A Bet on Web Components and Ember.Component Synchronicity by pixelhandler
- Web Components in Angular, Ember, and React. by Chris Bateman
- Using Polymer WebComponents with Angular.js by Josh Crowther
SEO and Web Components
Accessibility and Web Components
- Accessibility of Web Components by Marcy Sutton.
- Accessible Web Components by By Addy Osmani and Alice Boxhall.
- Notes on Web Components + ARIA by Steve Faulkner.
- Making Polymer Elements Accessible by Alice Boxhall.
- On the accessibility of web components. Again. by Bruce Lawson
Some presentations about Web Components
- Web Components: A chance to create the future by Zeno Rocha.
- Web Components Shift: a tectonic shift for web development by Eric Bidelman.
- Real World Web components by Jarrod Overson.
- Introduction to Web Components by Jason Mayes.
- Componentizando a Web com Polymer (pt-br) by Stefan Horochovec.
- Polymer: building modern apps on web components by Eric Bidelman.
- Desmistificando o Polymer (pt-br) by Beto Muniz.
- Polymer Elements: Tudo que você precisa saber para criar a web (pt-br) by Beto Muniz.
- WebApps com Web Components (pt-br) by Beto Muniz.
- Web Components, A próxima revolução do desenvolvimento web (pt-br) by Beto Muniz.
- Tudo que você precisa saber para iniciar com Polymer e Webcomponents (pt-br) by GDG Belo Horizonte.
- Polymer and modern web APIs: In production at Google scale
- What are Custom Elements?
- The cure for your Web Components hangover
- Why you should be using Web Components now. And how.
- The Road to Native Web Components
Articles about Web Components
- Why use Web Components?
- Web Components expert articles
- Why Web Components Aren’t Ready for Production… Yet by TJ VanToll.
- Why Web Components Are Ready For Production by TJ VanToll.
- The State of the Componentised Web by Ian Murphy.
- Shadow DOM CSS Cheat Sheet by Rob Dodson.
- Web Components – The Future Web by Arvind Ravulavaru.
- Web Components! Hoje! by Beto Muniz.
- Desmistificando o Polymer: Olá Polymer! (pt-br) by Beto Muniz.
- Desmistificando o Polymer: Porque o Polymer? (pt-br) by Beto Muniz.
- Desmistificando o Polymer: Polymer FAQ (unofficial) (pt-br) by Beto Muniz.
- Discoverability for Web Components by Zeno Rocha.
- Why Web Components? by Zeno Rocha and Addy Osmani.
- Extending Styles by Philip Walton.
- What happened to Web Components?
- Pros and Cons of Facebook's React vs. Web Components (Polymer)
Podcasts about Web Components
Some web tools related to Web Components
- WebComponents.dev — in-browser IDE to code web components in isolation with 58 templates available, supporting stories and tests.
- 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.
- Web Reflection: A W3C Custom Elements Alternative by Web Reflection.
- Are We Componentized Yet?.
- Vulcanize by Polymer Project.
- Web Components Tester by Polymer Project.
- Element Generator for Slush by WebComponents.org.
- Element Generator for Yeoman by WebComponents.org.
- webcomponents.js by WebComponents.org.
- Ele.
- CustomElements.io.
- Component Kitchen.
- Web Components Weekly by Mateus Ortiz.
Libraries and frameworks related with Web Components
- Polymer Project by Google.
- Join the Web Components revolution with Polymer by Sing Li.
- Introduction to Polymer: The Next Generation of Web Development by Matthew McNulty.
- Unlock the next era of UI development with Polymer by Rob Dodson.
- Polymer and the Web Components revolution by Matt McNulty.
- Polymer and Web Components change everything you know about Web development by Eric Bidelman.
- Using Polymer to Create Web Components by Rey Bango.
- Sharing Polymer Components: Part 1 by Rey Bango.
- Sharing Polymer Components: Part 2 by Rey Bango.
- Inheritance and composition with Polymer by Pascal Precht.
- Creating responsive UIs by Rob Dodson.
- Making Web Components accessible by Alice Boxhall.
- Hello Polymer: Q&A with Google’s Polymer team by Dr. Axel Rauschmayer.
- Google’s Polymer and the future of web UI frameworks by Dr. Axel Rauschmayer.
- What polymer and angular tell us about the future success of the web platform and javascript frameworks.
- The Polymer approach to building single page applications by Eric Bidelman.
- PolymerSnippets by Rob Dodson.
- Creating a Polymer Chat App with Material Design by Tomomi Imura.
- Polymer Generator for Yeoman.
- Built with Polymer.
- Awesome Polymer by Maurizio Mangione. 🎸
- X-tags Site by Mozilla.
- Brick by Mozilla.
- Keo for Shadow DOM.
- Standalone for Custom Elements.
- VueJS Main Repository
- Mithril Main Repository
- Angular Main Repository
- Bit component development, reuse and collaboration tool
- NuML site & storybook style-oriented framework and design system
- NuML repository
- Lego site native web-components made light and reactive
- Lego repository
Some Web Components
- Github Time Elements by GitHub.
- Router Manager by Erik Ringsmuth.
- Polymer Elements Catalog
- Responsive Embed by Joselito Júnior
A WebComponents.org selection
- Hello World's
- Boilerplates
- Podcasts.
- Articles.
- Presentations.
- Github.
Events, Meetups, etc.
- Belo Horizonte - Web Components & Polymer Meetup
- Buenos Aires - Web Components Meetup
- Paris - Web Components Meetup
- London - Web Components Meetup
- Madrid - Polymer Meetup
- Washington, DC - Polymer Meetup
- Washington, DC - Web Components Meetup
- Los Angeles - Web Components Meetup
- Melbourne - Polymer Meetup
- GDG PolymerMexico!
- Polymer Summit
Who to follow
- @polymer
- @web_components
- @ebidel
- @jkomoros
- @zenorocha
- @addyosmani
- @PascalPrecht
- @csuwildcat
- @rob_dodson
- @sindresorhus
- @eduardolundgren
- @djalmaaraujo
- @passy
- @djalmaaraujo
- @Nevraeka
- @nevir
- @keanulee
- @obetomuniz
- @stefannhs
Your contributions are always welcome!
MIT License © Beto Muniz