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:
- A new HTML element:
<template> - The associated API interfaces for the new elements:
HTMLTemplateElement,HTMLContentElement(removed from spec) andHTMLShadowElement - Extensions to the
HTMLLinkElementinterface and the<link>element - An API for registering custom elements,
Document.registerElement(), and modifications ofDocument.createElement()andDocument.createElementNS() - New "lifecycle callbacks" can be added to the prototype that a custom element is based on
- A new CSS pseudo-class to style elements by default,
:unresolved. - The Shadow DOM:
ShadowRootandElement.createShadowRoot(),Element.getDestinationInsertionPoints(),Element.shadowRoot - An extension to the
Eventinterface,Event.path - Extensions to the
Documentinterface - For styling Web Components:
- New pseudo-classes:
:host,:host(),:host-context()
- New pseudo-classes:
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.
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 |