Polyfills
The webcomponent.js polyfills enable Web Components in (evergreen) browsers that lack native support.
Install with Bower bower install webcomponentsjs
Install with npm npm install webcomponents.js
Download webcomponents.js 0.7.0 (116KB minified, 34KB gzipped)
Browser Support
| Chrome | Opera | Firefox | Safari | IE/Edge | |
 | |||||
 | |||||
 | |||||
 |
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.
Discover
Specs
Custom Elements
This specification describes the method for enabling the author to define and use new types of DOM elements in a document.
HTML Imports
HTML Imports are a way to include and reuse HTML documents in other HTML documents.
Templates
This specification describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents.
Shadow DOM
This specification describes a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
Articles
Update on standardizing Shadow DOM and Custom ElementsThere has been revived interest in standardizing shadow DOM and custom elements across all browsers. To that end we had a bunch of discussion online, met in April to discuss shadow DOM, and met earlier this month to discuss custom elements. There is agreement around shadow DOM now. host.attachShadow() will give you a ShadowRoot instance. And <slot> elements can be used to populate the shadow tree with children from the host.
Presentations
Componentize your app with Polymer ElementsBuilding components that can stand the test of time is tough! Frameworks change, new fads emerge, and often we're left with an aging codebase that needs to be rewritten if we want to stay current. Polymer and Web Components aim to change this cycle by building on new platform primitives which will allow us to finally create interoperable components that work in an environment.
Read More >
