Use the following browser configuration options before testing:
- Chrome:
about:flags => Enabled Experimental WebKit Features/Enable Experimental Web Platform
- Firefox:
about:config => dom.registercomponents.enabled
to enable document.registerElement
.
Use the extends
parameter of document.registerElement
to extend a native input element:
/* Cross-browser fallback */
document.registerElement = document.registerElement || document.register;
/* Element registration using x-tag format */
var MegaButton = document.registerElement('x-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
References
- Extending Native Elements
- HTML as Custom Elements
- Extending Custom Elements
- Create Custom HTML Elements
- x-tag and the Web Components Family
- Performance and Custom Elements
- Mozilla: Custom Elements
- Detailed Introduction to Custom Elements
- Web Components: The Chromium Projects
- Web Components Best Practices
- Component Model Wiki
- Web Component Proposals: Type Extensions