Introduction to WebComponents

WebComponents are the salvation of Component based web development.

Where all the front-end frameworks are pushing for Component approach and thinking in component style, DOM has the native way to address this. WebComponents is the collective solution to have components in the Browser natively. This collective solution includes:

CustomElements

ShadowDOM

HTML Template

HTML Imports

To get up and running with WebComponents, you only need the CustomElements V1 polyfill which provides a generic way to create components and lifecycle methods, which you can obtain from following repository:

Many would say that you will need shadowDOM, template tags, HTML imports for your custom elements. They are right but not completely. You can create your components without them as well.

CustomElements

CustomElements are the elements similar to native HTML elements like div, span etc. These are the extension of HTMLElement constructor and other similar constructors based on the type of CustomElement you wanna create.

Let's see an example; consider you wanna create a web component which will serve as a quick creation of figure with img and figcaption together. Normally the HTML will look like following:

Support?

Summary:
This is basically an after the fact notification that we're in progress of
implementing Custom Elements (both autonomous custom elements and
customized built-in elements) and the implementation for old spec, which
was never exposed to the web, will be removed. We are close to finishing
the implementation, but there are still some performance works before
shipping the feature. We plan to enable it only on Nightly first to get
more feedback from users. (there will be a intent-to-ship before shipping
the feature)https://groups.google.com/forum/#!msg/mozilla.dev.platform/BI3I0U7TDw0/6-W39tXpBAAJ