Can Web Components be used to create custom input elements?

https://stackoverflow.com/questions/18623765

27-06-2022
|

Domanda

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?

Soluzione

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow