Awesome Web Components

A curated list of awesome Web Components tools, articles and resources. Inspired by awesome-go and awesome-python.

• Awesome Web Components
  • Specifications
  • Web Standards
  • Guides
  • Interop
  • SEO
  • Accessibility
  • Presentations
  • Articles
  • Podcasts
  • Web Tools
  • Libraries and Frameworks
    • Polymer
    • Slim-JS
    • Bosonic
    • X-Tags
    • ReactJS
    • SkateJS
    • Aurelia
    • Switzerland
    • VueJS
    • Mithril
    • Angular
    • Stencil.js
  • Components
  • WebComponents.org
  • Community
  • Twitter
  • Contributing
  • License

Specifications

Specifications of Web Components

• Official Custom Elements Spec
• Official HTML Imports Spec
• Official Templates Spec
• Official Shadow DOM Spec

Web Standards

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

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.

Interop

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

SEO and Web Components

• Introducing Web Components and What It Means for Search Engine Optimization and Privacy.

Accessibility

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

Presentations

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
• Componentes como peças de lego by Diego Haz

Articles

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

Podcasts about Web Components

• WebComponents.org Podcasts
• Polymer Podcasts

Web Tools

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 Component DevTools Browser extension improving debugging web components
• 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

Libraries and frameworks related with Web Components

Polymer

• 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. :guitar:

Bosonic

• Bosonic Site.

X-Tags

• X-tags Site by Mozilla.
• Brick by Mozilla.

Slim-JS

• Slim-JS Documentation
• Git repository

ReactJS

• Keo for Shadow DOM.
• Standalone for Custom Elements.

SkateJS

• SkateJS Repo

Aurelia

• Aurelia Site.

Switzerland

• Switzerland

VueJS

• VueJS Main Repository

Mithril

• Mithril Main Repository

Angular

• Angular Main Repository

Stencil.js

• Stencil.js site
• Git repository

Bit

• Bit component development, reuse and collaboration tool

NuML

• NuML site & storybook style-oriented framework and design system
• NuML repository

Lego

• Lego site native web-components made light and reactive
• Lego repository

Components

Some Web Components

• Github Time Elements by GitHub.
• Router Manager by Erik Ringsmuth.
• Polymer Elements Catalog
• Responsive Embed by Joselito Júnior

WebComponents.org

A WebComponents.org selection

• Hello World's
  • Using Polymer.
  • Using X-Tags.
  • Using VanillaJS.
• Boilerplates
  • Using Polymer.
  • Using X-Tags.
  • Using VanillaJS.
• Podcasts.
• Articles.
• Presentations.
• Github.

Community

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

Twitter

Who to follow

• @polymer
• @web_components
• @ebidel
• @jkomoros
• @zenorocha
• @addyosmani
• @PascalPrecht
• @csuwildcat
• @rob_dodson
• @sindresorhus
• @eduardolundgren
• @djalmaaraujo
• @passy
• @djalmaaraujo
• @Nevraeka
• @nevir
• @keanulee
• @obetomuniz
• @stefannhs

Contributing

Your contributions are always welcome!

License

MIT License © Beto Muniz