Web Components With X-Tag
Written by Ian Elliot   
Tuesday, 15 October 2013
Article Index
Web Components With X-Tag
Using X-Tag
Accessors, Methods and Events



If you want to give your component a property called myval then you can do the job with the accessors object:

 myval: {
   return avalue;
do something with newval;

That is, for each property you want to create you simply provide two functions, a get and a set. 

There is one small gotcha to keep in mind. You can't use this.myval in the definition of myval otherwise the result is a recursive call to get or set.

One way to deal with local variables for each instance of your component is to set up an object to store them. For example:

lifecycle: {
 created: function() {
  this.innerHTML = "
  this.locals = {};
  this.locals.myval = 0; }

accessors: {
 myval: {
  get: function() {
   return this.locals.myval;
  set: function(newval) {
   this.locals.myval = newval;    


With this definition you can now write things like:

<my-component id="mycomp1" >test1</my-component>

 var mycomp =
 var temp = mycomp.myval;
 mycomp.myval = 30;


If you run this you will see zero and 30 printed on the console log. 

Of course, components can also have attributes and you can create a property that corresponds to an attribute using the attribute property.

That is:

get: function(){ return value},
 set: function(newval){do something with newval}

defines a property called myval as before corresponding to an attribute called myval which can be set using:

<my-component id="mycomp1" myval="20" >

or in code


Of course you can still set it as a property as in:



This does raise the question of how to initialize a property if it is also an attribute. If the attribute has been set in the tag you don't want to set it to a default value. However, as the property is automatically set from the attribute in the tag by using the appropriate set function, it turns out to be easy. All you have to do is put something like:

this.locals.myval = this.locals.myval||0;

in the created function. 


As well as properties you can also define methods in the methods object. For example, to create a clearAll method you would use 

methods: {
 clearAll: function() {
    console.log("clear all called");

and then you could call the method in the usual way:


You can, of course, create as many methods in the methods object as you need. 


Finally, you can define events within the events object. For example, to handle the component's click event:

 click: function(){

Now if you click on the component the message is displayed on the log. 

Where Next

That's about it for an introduction to X-Tag but there is more. There's a set of useful helper functions, for example, which can make building your own components much easier.  You also need to look up pseudos, templates, mixins and the prototype property. At the moment X-Tag is still developing and these are best left for a future update to this article. 

Have a look at some of the simpler components supplied with X-Tag or download the very simple example built up in this article from the CodeBin (note you have to register first).





More Information

Introduction to Web Components


Related Articles

Getting Started With jQuery UI

jQuery UI Custom Control - Widget Factory


To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.






or email your comment to: comments@i-programmer.info



JavaScript Canvas - WebGL 3D

Graphics 3D is the utimate.  In this extract from Ian Elliot's book on JavaScript Graphics we look at how to get started with WebGL 3D

JavaScript Async - Returning Promises

Promises are still relatively new and this means that there are asynchronous functions that don't make use of them. This leads on to the need to promisify existing and future code. In this extract fro [ ... ]

Other Articles







Last Updated ( Tuesday, 15 October 2013 )