Web Components v1 Reach Maturity
Web Components are a collection of web platform APIs that let you create your own HTML elements. A custom element such as <my-button> can behave like any built-in element, supporting properties, methods, events, and encapsulated styles and DOM trees.
Because they are built on platform-level primitives, Web Components provide a low-level component model that works across JavaScript libraries and frameworks. Components appear to other code as standard DOM elements, which makes them practical for both individual projects and shared, reusable libraries.
From v0 to v1
An earlier version of the specification, v0, shipped in Chrome 33. The current v1 specs are the result of broader collaboration between browser vendors and are quickly gaining traction:
- Chrome has supported Shadow DOM v1 since Chrome 53 and Custom Elements v1 since Chrome 54.
- Safari 10 shipped Shadow DOM v1, and WebKit has completed implementation of Custom Elements v1.
- Firefox is actively developing both Shadow DOM and Custom Elements v1.
- Both specifications are on the roadmap for Edge.
Defining a custom element with v1 is straightforward. You create a class that extends HTMLElement using ES6 syntax, then register it with the browser:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Tutorials covering Custom Elements v1 and Shadow DOM v1 are available for developers ready to dive in.
A Central Hub for Components
The Web Components community has a new focal point with the updated webcomponents.org. The site now includes an integrated catalog where developers can share their own elements.
The site brings together specification information, community updates, and documentation for both individual open-source elements and collections of elements built by other developers.
New components can be built with a library such as Google's Polymer or directly on the low-level Web Component APIs. Once complete, developers can publish their elements to the webcomponents.org catalog.
