Reusing independent components across multiple websites was always a bit painful up to now. You had to manually include CSS styles that can override your already existing styles, JavaScripts, copy and paste necessary HTML code, and usually in the end, write at least small JavaScripts.
For this reason, W3C is working on a specification called Web Components (http://webcomponents.org/). This is a set of standards that makes creating and reusing components very easy.
In the first part of this chapter, we'll take a look at what Web Components are and how they work in Dart while implementing one after another. We'll also quickly compare implementation in Dart and JavaScript.
In the second part, we're going to take a look at polymer.dart. Polymer is a JavaScript framework built on Web Components. Polymer.dart is its port to Dart. We'll use it for the bookshelf example from the previous chapter and see how it can help us write more encapsulated components for our web apps.
As Polymer is heavily based on Web Components, we'll set off with a brief exploration of each part of this standard.
Web Components is a cutting-edge technology in development right now, and there still isn't complete native support by some browsers (Firefox, for example). It defines three major parts that are necessary to build and use isolated components: Shadow DOM, Custom Elements, and HTML Imports.
The basic problem with including third-party HTML and CSS into your page is that it's not encapsulated. Your CSS styles can modify included HTML elements and vice versa. This also includes overlapping element IDs, classes, and so on.
With Shadow DOM, you can create an encapsulated DOM tree, which is isolated from the rest of the DOM.
The HTML specification contains a predefined number of tags that you can use. With Custom Elements, you can extend this set with your own tags that can contain HTML fragments and add functionality to it as you wish.
In combination with Shadow DOM, we can create custom tags that will contain an encapsulated DOM tree.
Template is an HTML5 tag that can contain any HTML subtree and can be cloned in order to reuse its content multiple times.
An important distinction from just writing HTML structure into a hidden <div> element is that the HTML fragment inside <template> isn't used on page load. It's a DOM structure that is parsed by the browser but not processed, which means <script> doesn't run, audio/video doesn't play, and images don't load. You can't even query elements inside <template> with document.getElementById() or any other query selector.
With Templates, we can write content for our custom element just like any other HTML.
HTML Imports extend existing <link> tags with the rel="import" attribute, which allows us to include HTML documents in other HTML documents and in combination with Shadow DOM, Custom Elements, and Templates, create completely independent components that can be included into any page with its full functionality by a single <link> tag.
Note
These four concepts combined represent the power and capabilities of Web Components.
You can see the current status of Web Components and read the editor's draft at http://www.w3.org/standards/techs/components.