To illustrate how to create web components we'll use the same element for all three methods. The end result will look like the example below:
```markup
```
We'll look at the differences between a script based approach used in x-tags and a declarative take using Polymer.
### Using vanilla Javascript
```javascript
var MyAvatarPrototype = Object.create(HTMLElement.prototype);
MyAvatarPrototype.createdCallback = function() {
var username = this.getAttribute('username');
var service = this.getAttribute('service');
var url = 'http://avatars.io/' + service + '/' + username;
var img = document.createElement( 'img' );
img.setAttribute('src', url);
this.appendChild(img);
};
document.registerElement('my-avatar', {
prototype: MyAvatarPrototype
});
```
or with tags and scripts:
```markup
```
### X-Tags
X-tags implementation of Web Components lacks the capability to import elements; their justification is that they are waiting to see if Javascript modules will work to avoid standards and technologies that duplicate each other.
```javascript
//
//
```
There is a very interesting presentation from ForwardsJS 3 that covers why you should be using web components now.
