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 - Basic Paths

Paths are the basic way to create a drawing using Canvas. In this extract from a chapter in my new book on JavaScript Graphics we look at the fundamentals of paths.

JavaScript Canvas - Text, Typography & SVG

For a Canvas object, drawing text is just another path to render. You can select a font and then render the shapes or glyphs it defines using stroke and fill methods. Going beyond this there are a lot [ ... ]

Other Articles







Last Updated ( Tuesday, 15 October 2013 )