Web Components

Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements.

Web Components consist of 4 main features which can be used separately or all together:

• Custom Elements - APIs to define new HTML elements
• Shadow DOM - Encapsulated DOM and styling, with composition
• HTML Imports - Declarative methods of importing HTML documents into other documents
• HTML Templates - The <template> tag, which allows documents to contain inert chunks of DOM

Browser Support

HTML Templates are supported in Google Chrome, Mozilla Firefox, Microsoft Edge, Safari and Opera.

Support for an early version of Custom Elements and Shadow DOM, known as "v0", is present in some Blink-based browsers like Google Chrome and Opera and is in Mozilla Firefox (requires a manual configuration change). The newer Custom Elements and Shadow DOM "v1" APIs are being implemented in Safari 10, Google Chrome (53.0.2785), and under development in Mozilla Firefox. Microsoft Edge has not started implementing Custom Elements or Shadow DOM yet.

Backwards compatibility with older browsers is implemented using JavaScript-based polyfills.

External links

• Webcomponents with React.js
• Webcomponents.org
• GitHub WebComponents
• polymer-project
• Expand JS
• x-tags
• Custom Elements
• Shadow DOM
• HTML Imports
• Templates