Getting Start Custom Element


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


can i use :

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


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


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)

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.


use in html.


create instance by using document.createElement.

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

create new function.

var xbar = new XBar();

Type extension


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


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');

create new function.

var specialButton = new 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');}