Can Web Components be used to create custom input elements?

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?

Tilburg

Example of a custom input element created by Google using Polymer: polymer-project.org/components/paper-input/demo.html – Deduce

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

Rubefaction

Here's a demo that doesn't appear to be working in Chrome or Firefox using the code you've provided. Am I missing something? I've double checked that I've "Enable experimental Web Platform features" set as enabled. – Tatia

@Tatia Thanks for the heads up. I've updated the fiddle to get it working in Firefox and found another example which works using style sheet rules to define the display properties of the custom tag. – Rubefaction

To be clear, the issue I'm having with custom elements doesn't appear to be with registration, rendering, or styling. It's when they're supposed to represent form data that things don't work. I haven't seen an example yet where a custom element can be registered so that it can be submitted as part of a form, or clicked on to submit a form. – Tatia

@Tatia Same here. I got the example working for a simple form submit, for what it's worth. – Rubefaction

Ok, I think I figured it out. The custom elements work under certain conditions. You need to use the extends property and do one of two things: 1. dynamically create the element with the constructor, i.e. new MegaButton() 2. use the [is] attribute on the extended element, i.e. <button is="mega-button"></button>. In both cases the element created will be the extended type (in this case button) which means that to style the custom element, you'd need to use [is="mega-button"] as a selector instead of mega-button. But at least these elements will work with shadow dom and forms. – Tatia

@Tatia Can you update the jsfiddle with what you have so far? – Rubefaction

Here's a fiddle that works in chrome where an <input> element is set up to use CodeMirror. I'd have used a <textarea> element, but it appears that their shadow dom can't be overridden. – Tatia

@zzzBov That's a good example. I saw the point about you made about adding the [is] attribute in one of the references, but it seemed clunky that you would need to update the markup each time you want to create a custom element. Oh well, that's design by committee. – Rubefaction