This is a guide intended to introduce to Web Components. Everyone can contribute here!
Web Components the Right Way was made with love by Mateus Ortiz
- 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.
- WebComponents.org a place to discuss and evolve web component best-practices
- Polymer Blog The latest goings-on with the Polymer project and in the community.
- 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.
- Modular future Web Components A Guide to Web Components
- 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.
- Web Components and their role in the future of web development A discussion surrounding the history and future of Web Components in modern web development.
- A No-Nonsense Guide to Web Components A multi-part series with a crash course on Web Components specs, polyfills, performance, accessibility, and more.
- Understanding Web Components Another overview of web components specs and explanation of their advantages: composability, encapsulation, reusability.
- Demythstifying Web Components An attempt to conclusively curb stomp the seemingly endless FUD that circulates about Web Component
- Custom elements v1: reusable web components With Custom Elements, web developers can create new HTML tags, beef-up existing HTML tags, or extend the components other developers have authored.
- Reintroducing Custom Elements V1 A post describing changes in version V1 of Custom Elements which has been agreed by all major browsers vendors so that it is, finally today, a safe bet.
- The Case for Custom Elements: Part 1 The case for why Custom Elements make sense, especially for large organizations.
- The Case for Custom Elements: Part 2 A post describing some of the features that make Custom Elements compelling if you’re considering building your own component library.
- All about HTML Custom Elements A detailed overview including the differences between Custom Elements v0 and v1.
- Custom Elements at Mozilla Developer Network
- Introducing Custom Elements The Custom Elements API has been implemented and enabled by default in the Safari Technology Preview 18.
- Shadow DOM v1: self-contained web components With Shadow DOM, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript.
- What's New in Shadow DOM v1 (by examples) This document is an attempt to track the difference between Shadow DOM v0 and v1.
- Accessibility and the Shadow DOM A lesson on rendering trees, emerging technologies and tacos
- Introducing Slot-Based Shadow DOM API Version 1 of the Shadow DOM standard was shipped in Safari 10.0.
- Introduction to the template elements Templates allow teams to divide their work.
- 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.
- Aurelia - Aurelia is a JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity.
- Polymer vs Angular 2 Which one should I choose?
- Polymer vs. X-Tag Polymer vs. X-Tag - Here's the difference
- Polymer vs Angular Here’s the difference between Polymer and Angular
- Integrating Web Components with AngularJS This article focuses on the integration of Web Components with the AngularJS of today and the AngularJS of tomorrow.
- 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.
- Angular2-Polymer A directive factory that allows using Polymer based Web Components in Angular 2 applications.
- 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
- Slush Element A Slush Generator that provides a functional boilerplate to easily create Custom Elements using Polymer, X-Tag or VanillaJS.
- Seed-Element Polymer element boilerplate Tests
- Web Component Tester web-component-tester makes testing your web components a breeze!
- Bower search Bower search Web Components
- Built with Polymer A curated collection of web apps and websites using Polymer
- Polymer Projects Projects using Polymer
- Components Kitchen The best ingredients for your web apps
- Custom Elements A web components gallery for modern web apps
- 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.
- 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.
- Polymer Elements Style Guide
- High Performance Web Components HTML5DevConf May 2014: Steve Souders, Fastly : High Performance Web Components
- 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.
- Bit Bit lets you easily create reusable web components from any context. You can store and organize your components together and still find, modify, test and use them individually in any application.
- Polycasts with Rob Dodson Rob Dodson from the Chrome Developer Relations team explores the ins and outs of Polymer.
- 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.
- Configurando Bower e Polymer PT-br mostrando como é fácil começar a instalação do Bower e do Polymer
- Are We Componentized Yet? Tracking the progress of Web Components through standardisation, polyfillification, and implementation.
- Vulcanize Concatenate a set of Web Components into one file
- WebComponentsjs: A polyfill for Custom Elements, Shadow DOM, HTML Imports, Weakmap, and Mutation Observers
- custom-elements: A polyfill for the v1 spec for Custom Elements.
- 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.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Eric Bidelman | Addy Osmani | Rob Dodson | Web Components | Polymer |
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Alex Komoroske | Pascal Precht | Zeno Rocha | Daniel Buchner | Angelina Fabbro |
Copyright 2014, All rights reserved.
Code licensed under the: MIT license
@author Mateus Ortiz [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent