Post on 16-Mar-2018
Web Components are the future of the webTake advantage of new web technologies using PolymerJS
Fakiolas Marios - fakiolasmarios@gmail.com / @fakiolinhoFrontend Developer at mist.io
What are Web Components then?
Web Components Introduction
Web Components are a set of standards 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.
Web Components Basic Ingredients
Web Components use following technologies:
● 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.
HTML Templates
The HTML template element <template> is a mechanism 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.
HTML Templates (example)
<ul id="users-list"></ul>
<template id="user-item">
<li>
<span id="user-name"></span>
</li>
</template>
HTML Templates (example)
var t = document.querySelector('#user-item');
t.content.querySelector("#user-name").textContent = "Fakiolas 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);
Shadow DOM
Shadow DOM provides encapsulation for the JavaScript, CSS, 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.
Shadow DOM (example)
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
...
</script>
</body>
</html>
Shadow DOM (example)
var shadow = document.querySelector('#hostElement').
createShadowRoot();
shadow.innerHTML = '<p>Here is some new text</p>';
shadow.innerHTML += '<style>p { color: red; }</style>';
Custom Elements
Custom Elements is a capability for creating your 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>
Custom Elements (example)
var UserElementProto = Object.create(HTMLElement.prototype);
UserElementProto.createdCallback = function() {
var shadow = this.createShadowRoot();
var img = document.createElement('img');
img.url = this.getAttribute('data-url');
shadow.appendChild(img);
};
var UserElement = document.registerElement('user-element', {
prototype: UserElementProto
});
HTML Imports
HTML Imports is intended to be the packaging 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>
Web Components are awesome right?
Web Components support is limited yet
Custom Elements Support (1st of March 2016)
Shadow DOM Support (1st of March 2016)
HTML Imports Support (1st of March 2016)
HTML Templates Support (1st of March 2016)
Hmm, can i use Web Components today?
There is a solution!!!!
Use Web Components through Polymer
Polymer is the solution
What is Polymer?
Polymer is an open source js library 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).
How Polymer works?
The Polymer library is designed to make 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.
Web Components Primitives
These standards provide the primitives you need 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.
Polymer Library
Provides a declarative syntax that makes it simpler 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.
Custom Elements
If you don’t want to write your own 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.
Polymer Catalog (built in elements)
Polymer Google Web Components closer look
Use google-map element to show a simple map of Greece
<!-- 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>
Use google-map element adding some custom markers
<google-map latitude="38.605225" longitude="24.645403" fit-to-markers>
<google-map-marker latitude="37.969406" longitude="23.720744" title="
Hello Athens!"></google-map-marker>
<google-map-marker latitude="39.104739" longitude="26.557254" title="
Hello Mitilini!"></google-map-marker>
</google-map>
Create a custom element with Polymer
<dom-module id="user-element">
<style>...</style>
<template>
<img src="[[url]]" />
</template>
<script>
Polymer({
is: 'user-element',
properties: {
url: String
}
});
</script>
</dom-module>
Use our custom element
<!-- Polyfill Web Components support for older browsers -->
<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Import element -->
<link rel="import" href="components/user-element.html">
<!-- Use element -->
<user-element url="http://someAvatar.com"></user-element>