currently being produced as a W3C specification that allow for the creation of reusable widgets in web documents. They are part of the browser, and so they do not need external libraries like jQuery or Dojo. 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.
HTML Templates • Shadow DOM • Custom Elements • HTML Imports Each of them can be used separately but combined with the rest gives us Web Components technology.
for holding client- side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
Marios"; // Clone the new li and insert it into the ul var list = document.querySelector("#users-list"); var clone = document.importNode(t.content, true); list[0].appendChild(clone);
and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component. Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can "leak" into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid.
own custom HTML tags and elements. They can have their own scripted behavior and CSS styling. They are part of Web Components but they can also be used by themselves. <user-element data-url="http://someAvatar.com"></user-element>
mechanism for Web Components Load it in your HTML5 just once: <link rel="import" href="user-element.html"> Call it into action when you need it: <user-element data-url="http://someAvatar.com"></user-element>
supported officially by Google. Since Web Components are not supported 100% yet, Polymer binds the gap by using webcomponents.js polyfills. Also it offers a great variety of features and utilities (2-way data-binding, observations, computed properties etc) so we can build Rich Internet Applications with Web Components today. It is hosted on Github since October of 2012 and at the moment (1st of March 2016) Polymer has 14.400 stars. Its first stable 1.0 version was released in 2015 (28th of May 2015).
it easier and faster for developers to create great, reusable components for the modern web. Polymer is built on top of the web components standards and it helps you build your own custom elements.
to build new components. You can build your own custom elements using these primitives, but it can be a lot of work (we saw some vanilla js examples before). Not all browsers support these standards yet, so the web components polyfill library fills the gaps, implementing the APIs in JavaScript.
to define custom elements. And it adds features like templating, two-way data binding and property observation to help you build powerful, reusable elements with less code.
elements, there are a number of elements built with Polymer that you can drop straight into your existing pages. These elements depend on the Polymer library, but you can use the elements without using Polymer directly. You can mix and match elements built with Polymer with other custom elements, as well as built-in elements. The Polymer team has written collections of elements that you can use in your apps.
<!-- Polyfill Web Components support for older browsers --> <script src="components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Import element --> <link rel="import" href="components/google-map/google-map.html"> <!-- Use element --> <google-map latitude="38.605225" longitude="24.645403"></google-map>