Can Web Components be used to create custom input

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?

Answer 1

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