After Google and Mozilla's solutions for web components, it is now Microsoft’s turn to enter this space with their public release of the X-Tag library. The official website defines it as,
X-Tag is a Microsoft supported, open source, JavaScript library that wraps the W3C standard Web Components family of APIs to provide a compact, feature-rich interface for rapid component development. While X-Tag offers feature hooks for all Web Component APIs (Custom Elements, Shadow DOM, Templates, and HTML Imports), it only requires Custom Element support to operate. In the absence of native Custom Element support, X-Tag uses a set of polyfills shared with Google’s Polymer framework.
In other words, X-Tag is to Microsoft what Polymer is to Google. The only thing common to both of them is the underlying polyfill that enables support for web components in non-supporting browsers.
How is X-Tag Different than Polymer?
Polymer combines all four web component technologies, namely, HTML Imports, Custom Elements, Shadow DOM and HTML Templates into a single package. It provides the developer with an easy-to-use API for building custom web components. On the other hand, X-Tag only provides the Custom Element API to build custom web components. Of course, you could also still use other web component APIs in conjunction with the X-Tag library.
Isn’t X-Tag, a Mozilla Project?
Yes it was, but it now no longer is. After some digging, I managed to find out that the original developer of the X-Tag project, Daniel used to work at Mozilla, when he created the library. But since then, he has moved to Microsoft and continued the project. Moreover, he was the sole contributor to the library with help from an ex-Mozillian. Hence, it is now a Microsoft-backed project founded by an ex-Mozillian.
Getting Started with X-Tag
In this article, we will build a custom element using the X-Tag library to embed a Google map street view using the following markup:
[code language="html"]
<google-map latitude="40.7553231" longitude="-73.9752458"></google-map>
[/code]
The <google-map> custom element will have two attributes, latitude and longitude, to specify the coordinates of a location. Since these attributes are optional, we will also assign default values for each one of them in case the developer fails to define them in the markup.
Let’s start by including the X-Tag JavaScript library in the <head> of our document.
[code language="html"]
<!DOCTYPE html>
<html>
<head>
<!-- X-Tag library including the polyfill -->
<script src="http://ift.tt/1P5w6Fl;
</head>
<body>
<!-- Custom element markup will appear here -->
<script>
<!-- The behavior of the custom element will be defined here -->
</script>
</body>
</html>
[/code]
It is important to include the X-Tag library in the
<head>of the document. This is so that it is downloaded and parsed completely before the rendering engine encounters the custom element markup that we will use inside the<body>.
Defining the Custom Element
Unlike Polymer, the process of creating a custom element with X-Tag is completely JS driven. The X-Tag library provides a bunch of useful methods, callbacks and properties to define a custom behavior for our element. A typical skeleton of creating a custom element with X-Tag looks like the following,
[code language="html"]
<script>
xtag.register('google-map', {
content: '',
lifecycle: {
created : function(){
/* Called when the custom element is created */
},
inserted : function(){
/* Called when the custom element is inserted into the DOM */
},
removed : function(){
/* Called when the custom element is removed from the DOM */
},
attributeChanged: function(attrName, oldValue, newValue){
/* Called when the attribute of the custom element is changed */
}
},
accessors : {},
methods : {},
events : {}
});
</script>
[/code]
Continue reading %Building Custom Web Components with X-Tag%
by Pankaj Parashar via SitePoint
No comments:
Post a Comment