Getting Start Custom Element

October 27, 2014

Reading time ~3 minutes

Outline

we can define new tag by using Custom Element and also extends native element.

Capability

can i use : http://caniuse.com/#feat=custom-elements

At the moment (2014/10/27) we can it only Google Chrome, Opera, Android Browser, and Chrome for Android

Introduction

In specification there are two type of custom elements.

Custom tag *

You can define new tag name which contain hyphen (-).It can be inherited other new tag.

e.g. x-hove, special-button

Type extension *

You can extend native tag (button, input, time). Those tags are called type extension.

e.g. special-button (extend button)

Custom tag

Register

define x-foo tag.

var XFoo = document.registerElement('x-foo');

define x-bar tag which inherit x-foo element.

var XBar = document.registerElement('x-bar', {
    	prototype: Object.create(XFoo.prototype)
  	});

NOTICE : According to HTML5Rocks, We can extends custom tag by using extends property. like this…

var XBar = document.registerElement('x-bar', {
    	prototype: Object.create(XFoo.prototype),
    	extends: 'x-foo'
  	});

But in Google Chrome Canary v40 it cause error below.

Error: Failed to execute ‘registerElement’ on ‘Document’: Registration failed for type ‘x-bar’. The tag name specified in ‘extends’ is a custom element name. Use inheritance instead. So you should use prototype inherit only. Please give me any information about it.

create

use in html.

<x-foo></x-foo>
<x-bar></x-bar>

create instance by using document.createElement.

var xfoo = document.createElement('x-foo');
document.body.appendChild(xfoo);

create new function.

var xbar = new XBar();
document.body.appendChild(xbar);

Type extension

Register

var SpecialButton = document.registerElement('special-button', {
	prototype: Object.create(HTMLButtonElement.prototype),
	extends  : 'button'
});

create

use in html. You have to set is attribute if you use Type extension.

<button is="special-button"></button>

create instance by using document.createElement.

var specialButton =  document.createElement('button', 'special-button');
document.body.appendChild(specialButton);

create new function.

var specialButton = new SpecialButton();
document.body.appendChild(specialButton);

Add Properties

use Object.defineProperty.

var xPiyoProto = Object.create(HTMLElement.prototype);
xPiyoProto.hoge = function(){alert('hoge');};
Object.defineProperty(xPiyoProto, 'bar', {value: 5}); // readonly
document.registerElement('x-piyo', {prototype: xPiyoProto});

add properties in definition.

var XPiyo = document.registerElement('x-piyo', {
	prototype: Object.create(HTMLElement.prototype, {
  		bar: {
    		get : function(){return 5;}
  		},
  		hoge: {
    		value: function(){alert('hoge');}
  		}
	})
});

Reference

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015