Custom Element Extension (Full)

Create a custom element extending a button, with a customised prototype.

by Raphael Quintao

HTML

<button id="new-button">Submit</button>
<!-- View the developer console in Chrome or Opera, or Firefox with the dom.webcomponents.enabled preference on, to see this working -->

JavaScript

/* Create a new prototype, extending the HTMLButtonElement interface */
var newBtnProto = Object.create(HTMLButtonElement.prototype);

/* Add example properties and methods to the new prototype */
newBtnProto.newProperty = 'foo';
newBtnProto.newMethod = function () {
    console.log('New method!');
}

/* When the custom element has been used in the page, run a function to prove it */
newBtnProto.attachedCallback = function () {
    console.log('Attached', this.newProperty);
};

/* Register the new element with the name 'new-button', state that it extends the button element, and that it should have the property and method defined in the extended prototype above */
var newBtn = document.registerElement('new-button', {
    extends: 'button',
    prototype: newBtnProto
});