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?

Example of a custom input element created by Google using Polymer: https://www.polymer-project.org/components/paper-input/demo.html — Ajedi32, Oct 30 '14 at 14:13

Paul Sweatte · Accepted Answer · 2015-11-16T22:57:43.703

6

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

edited Nov 16 '15 at 22:57

answered Apr 14 '14 at 23:23

Paul Sweatte

24,148
7
127
265

[Here's a demo that doesn't appear to be working in Chrome or Firefox using the code you've provided](http://jsfiddle.net/sBWr2/). Am I missing something? I've double checked that I've "Enable experimental Web Platform features" set as enabled. – zzzzBov May 06 '14 at 17:07
@zzzzBov Thanks for the heads up. I've [updated the fiddle](http://jsfiddle.net/sBWr2/46/) to get it working in Firefox and found [another example](http://jsfiddle.net/Buttonpresser/9W4pe/) which works using style sheet rules to define the display properties of the custom tag. – Paul Sweatte May 07 '14 at 01:25
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. – zzzzBov May 07 '14 at 04:01
@zzzzBov Same here. I got the example working for a [simple form submit](http://jsfiddle.net/sBWr2/66/), for what it's worth. – Paul Sweatte May 07 '14 at 17:26
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. ``. 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. – zzzzBov May 13 '14 at 17:10
@zzzzBov Can you update the jsfiddle with what you have so far? – Paul Sweatte May 13 '14 at 18:44
1

[Here's a fiddle that works in chrome](http://jsfiddle.net/xZT7L/) where an `` element is set up to use [CodeMirror](http://codemirror.net/). I'd have used a `` element, but it appears that their shadow dom can't be overridden. – zzzzBov May 14 '14 at 01:37
@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. – Paul Sweatte May 14 '14 at 01:45

Can Web Components be used to create custom input elements?

1 Answers1

Linked