Search code examples
inputsubmitweb-componentsample

Can Web Components be used to create custom input elements?

How is it/(or just "is it?") possible to create a Web Component that can be placed inside a form and act just as any input element, that's sent to the server on submit? In other words, can Web Components be used to create custom input elements?

Solution

  • 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