Web Components the Right Way

This is a guide intended to introduce to Web Components. Everyone can contribute here!

Web Components the Right Way
- Specs
- Blogs
- Getting Started
- Reading
- Interop
- Generators
- Tests
- Discover
- Best Practices
- Style Guides
- Perfomance
- Libraries
- Screencasts
- Suport
- Concatenating
- Boilerplates
- Who to follow
- License

Web Components the Right Way was made with love by Mateus Ortiz

Specifications

Web Components - This document is a non-normative reference, which provides an overview of Web Components.
Shadow Dom - Spec of Shadow Dom
HTML Imports - Spec of html imports
Template Spec of Template
Custom Elements - Spec Custom Elements is cherry on cake.

Blogs

WebComponents.org a place to discuss and evolve web component best-practices
Polymer Articles Articles core concepts of build apps on top of Polymer and web components
Polymer Blog Blog with news of polymer.

Reading

Introduction to the template elements Templates allow teams to divide their work.
Polymer vs. X-Tag Polymer vs. X-Tag - Here's the difference
Ten Principles for Great General Purpose Web Components This page lays out a set of principles for creating general-purpose web components that can be readily adopted in a wide range of sites and application.
Introduction To Custom Elements A Detailed Introduction To Custom Elements
Accessibility and the Shadow DOM A lesson on rendering trees, emerging technologies and tacos
Modular future Web Components A Guide to Web Components
Polymer vs Angular Here’s the difference between Polymer and Angular
Building single page apps using web components The Polymer approach to building single page applications
Web Components é uma Revolução? PT-br Existe uma nova celebridade na cidade, e seu nome é "Web Components". Ultimamente muitos apresentam esta nova tecnologia como o 'Santo Graal' que vai resolver todos os problemas da Web. Este artigo não é um apoio incondicional, não é uma crítica negativa irrefutável, mas meramente uma apresentação de perspectivas com o objetivo de dar clareza.
The State of the Componentised Web The idea of building applications out of a number of independent components isn’t anything new. But with Web Components is a good time to look at component-based application development, how we benefit from taking this approach, how we can build our applications in this way using existing technologies and how we’re likely to be building our front-end web apps in the future.
Integrating Web Components with AngularJS This article focuses on the integration of Web Components with the AngularJS of today and the AngularJS of tomorrow.
Introducing Polymer 0.5.1 We announce significant releases here on the blog, highlighting the major new features as well as breaking changes.
Polymer Web Components With Marionette.js JavaScript is a playground. If you disagree, then I encourage you to read Atwood’s Law. A quick Google search will reveal the law in full force with assemblers, machine emulators, and programming languages all written in JavaScript. That is just a small sampling. Go peruse the npm registry for plenty of build tools, frameworks, and servers written in JavaScript. We are tinkerers, especially in the JavaScript community. Sometimes our creations are practical and sometimes they are just fun.
Creating a Polymer Chat App with Material Design I am showing how to create yet another chat app with Material Design using Polymer to create a simple but visually appealing app with a great user-experience
Best Practice for Creating Custom Elements It looks like custom elements, and web components in general, are beginning to break through into general developer consciousness, as I see more and more articles and talks discussing what they are, what they are good for, and how to make them.

Getting Started

Using Polymer to Create Web Components To bridge the gap and give developers access to this rich functionality now, Google has created the Polymer library which serves as a set of polyfills to bring the promise of Web Components to you today.
Custom Elements defining new elements in HTML
Exploring HTML Imports Web Components have come a long way in the past few months. HTML Imports allow you to load additional documents into your page without having to write a bunch of ajax. This is great for Custom Elements where you might want to import a suite of new tags.

Interoperability

React and Custom Elements Component Interop with React and Custom Elements
Interop Sass A demo of interoperability between Sass and Polymer.
Interop Less A demo of interoperability between Less and Polymer.
Interop Angular A demo of interoperability between Polymer and AngularJs.
Custom Element Interoperability Using Polymer, X-Tag, and Vanilla Custom Elements

Generators

Generator Elements A Yeoman Generator that provides a functional boilerplate to easily create Custom Elements using Polymer, X-Tag or VanillaJS.
Generator Polymer Yeoman generator for scaffolding Polymer apps
Geneator X-Tag X-Tag generator for Yeoman
Generator Bosonic Yeoman Generator Bosonic
Slush Element A Slush Generator that provides a functional boilerplate to easily create Custom Elements using Polymer, X-Tag or VanillaJS.

Tests

Seed-Element Polymer element boilerplate Tests
Web Component Tester web-component-tester makes testing your web components a breeze!

Discover

Bower search Bower search Web Components
Built Polymer Built with Polymer
Components Kitchen The best ingredients for your web apps
Custom Elements a web components gallery for modern web apps
Polymer Tools Designer Designer is a drag and drop tool for prototyping apps using Polymer. Save your experiments as Github gists.

Best Practices

Web Components best practices Web Components (WC) are a new set of web platform features that enable developers to build applications in a declarative, composable way.
How should I name my element? Naming is always a challenging task when developing a component. We can create truly complex pieces of code but we still have a hard time to name a simple variable.
WEB COMPONENTS AND YOU – DANGERS TO AVOID Web Components are a hot topic now. Creating widgets on the web that are part of the browser’s rendering flow is amazing.
Melhores Práticas Web Components PT-br Conheça práticas simples que podem ajudar na organização do seu web component.
The Web’s Declarative, Composable Future This year, the platform is getting Web Components, bringing forward a way to make the relationships between markup and behaviour a lot less vague when you’re looking at the HTML.

Style Guides

Google Web Components Style Guide This guide serves as an extension to the Google JavaScript Style Guide with additional style guidance around authoring Web Components, particuarly those in this element collection. It is targeted at Google engineers, but may be useful for others too.

Performance

High Performance Web Components HTML5DevConf May 2014: Steve Souders, Fastly : High Performance Web Components

Libraries

Polymer Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.
X-Tag X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
Bosonic Bosonic is a set of tools that enable you to build Web Components as the spec currently describes, and supporting not-so-modern browsers like IE9.
Polymer Dart Polymer.dart is a Dart port of Polymer. Build Web Components with Dart, and interoperate with Web Components built with JavaScript.
Skate Skate is a web component library that is focused on being a tiny, performant, syntactic-sugar for binding behaviour to custom and existing elements without ever having to worry about when your element is inserted into the DOM.

Screencasts

Setting up Bower and Polymer I wanted to show how easy it is to get Bower and Polymer setup.
YOLOmer! Polymer and Yeoman for lighting fast dev 'Allo! Rob Dodson here, your host on this tour of the new Polymer generator for Yeoman.
Introducing the Polymer Designer tool We're really excited to show off our new Designer tool, which makes building prototypes with Polymer super easy. In this video I'll walk you through the basics of creating a simple maps app, and along the way we'll touch on some of the interesting features that Designer brings to the table.
Ferramenta Polymer Designer PT-br Introdução sobre Polymer Tools Designer ferramenta de prototype de web components.
Configurando Bower e Polymer PT-br mostrando como é fácil começar a instalação do Bower e do Polymer

Support

Are We Componentized Yet? Tracking the progress of Web Components through standardisation, polyfillification, and implementation.

Concatenate

Vulcanize Concatenate a set of Web Components into one file

Boilerplates

Polymer Boilerplate A bare minimum custom element starter-kit using Polymer.
X-Tag Boilerplate A bare minimum custom element starter-kit using X-Tag.
VanillaJS Boilerplate A bare minimum custom element starter-kit using VanillaJS.