Web Components

Draft
This page is not complete.

Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery or Dojo. An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page. Web Components use new or still-developing standard browser capabilities.

Note: This is an experimental technology. The browser you use it in must support Web Components. See Enabling Web Components in Firefox.

The description above works fairly well at this moment in time, but it leaves out many other things that Web Components could be created for. With a Web Component, you can do almost anything that can be done with HTML, CSS and JavaScript, and it can be a portable component that can be re-used easily.

Sometimes there is some confusion regarding Web Components and Google Polymer. Polymer is a framework that is based on Web Components technologies. You can make and use Web Components without Polymer.

Web Components are not fully implemented in all browsers yet, and so to use them right now in most browsers (January 2015) you will probably need to use polyfills to fill in the gaps in browser coverage. Polyfills are available in the Google Polymer project. To find out which browsers implement Web Components, see Are We Componentized Yet?

Web Components consists of these four technologies (although each can be used separately):

The Web Components specifications define the following items:

Enabling Web Components in Firefox

Web Components capabilities are disabled by default in Firefox. To enable them, go to the about:config page and dismiss any warning that appears. Then search for the preference called dom.webcomponents.enabled, and set it to true.

Firefox enable web components

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'template element' in that specification.
Living Standard
WHATWG HTML Living Standard
The definition of 'custom elements' in that specification.
Living Standard
DOM
The definition of 'shadow trees' in that specification.
Living Standard
Shadow DOM Working Draft  
HTML Imports Working Draft  
CSS Scoping Module Level 1 Working Draft  

Document Tags and Contributors

 Last updated by: DomenicDenicola,