Can Web Components be used to create custom input elements?

StackOverflow https://stackoverflow.com/questions/18623765

Question

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?

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top