Web Components

Web Components are a set of features currently[1] 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:

Features

Custom Elements

There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements, they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.[2]

Shadow DOM

Shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM in the same way you would with nested elements, while the browser can render and modify that code the same way it would with nested elements. The impact of this and that CSS is scoped within the Shadow DOM of a particular element is that HTML elements can be encapsulated without the risk of CSS styles leaking and affecting the elements that it was not supposed to affect . Although these elements are encapsulated in regards to HTML and CSS, they can still fire events that can be picked up by other elements in the document.[3][4]

The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.[4]

Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through scripting. In JavaScript, you attach Shadow DOM to an element using Element.attachShadow().[5]

The ability to scope HTML and CSS is essential to the creation Custom Elements. If shadow DOM would not exist different external Custom Elements could interact in unwanted ways.

HTML Import

HTML import is a tool to include HTML documents and web components from external sources without using AJAX requests and similar methods.[6]

The syntax for doing an HTML import looks like this:

<link rel="import" href="mydocument.html">

To avoid loading and executing scripts twice that are introduced through imports, HTML import skips loading and executing files that have previously been loaded.[7]

Mozilla Firefox has no support for HTML import and do not intend to implement it.[8][9]

HTML Template

HTML template is a way to create inert chunks of HTML that are stamped on will. The syntax of HTML templates look like this:

<template>
    <p>The HTML you wish to instantiate on will</p>
</template>

Scripts will not run, and resources that are inside a template will not be fetched until the template is stamped out.[10]

Browser Support

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

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,[12] Google Chrome (53.0.2785), and under development in Mozilla Firefox. Microsoft Edge has not started implementing Custom Elements or Shadow DOM yet.[13]

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

Libraries

There are several libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Three of the larger libraries are X-Tag, Polymer, and Bosonic.

Two of these, Bosonic and Polymer, provides ready-made components that are free to use. These components can be used interchangeably as they are all built on open web technologies.[14]

History

Web Components were introduced by Alex at Fronteers Conference 2011 for the first time. [15]

Polymer, a library based on Web Components was released by Google in 2013.[16]

References

  1. ↑ "Web Components Current Status - W3C".
  2. ↑ "Custom Elements". www.w3.org. Retrieved 2016-12-01.
  3. ↑ "What the Heck is Shadow DOM?". Dimitri Glazkov. 2011-01-15. Retrieved 2016-12-01.
  4. 1 2 "Shadow DOM v1: Self-Contained Web Components | Web | Google Developers". Google Developers. Retrieved 2016-12-01.
  5. ↑ "Shadow DOM". Mozilla Developer Network. Retrieved 2016-12-01.
  6. ↑ "HTML Imports". www.w3.org. Retrieved 2016-12-02.
  7. ↑ Community. "Introduction to HTML Imports — WebComponents.org". webcomponents.org. Retrieved 2016-12-02.
  8. ↑ "Mozilla and Web Components: Update ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.
  9. ↑ "The state of Web Components ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.
  10. ↑ Community. "Introduction to the template elements — WebComponents.org". webcomponents.org. Retrieved 2016-12-03.
  11. ↑ "Can I use... Support tables for HTML5, CSS3, etc".
  12. ↑ "What's New in Safari". Apple Inc. Retrieved 21 June 2016.
  13. ↑ "Are We Componentized Yet?".
  14. ↑ "Web Components in production use – are we there yet?". vaadin.com. Retrieved 2016-11-21.
  15. ↑ "Web Components and Model Driven Views by Alex Russell · Fronteers". fronteers.nl. Retrieved 2016-12-02.
  16. ↑ "The state of Web Components ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.

External links

This article is issued from Wikipedia - version of the 12/3/2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.