Menu
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?
297
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property).
The Android UI model is inherently customizable, offering the means of Android customization, testing, and the ability to create custom UI components in various ways: Inherit an existing component (i.e. TextView , ImageView , etc.), and add/override needed functionality.
Lightning Web Component or LWC are custom elements built using native HTML and Modern JavaScript. It uses core web components standards and latest ECMAScript 6, 7, 8, 9 and beyond. Salesforce provides an open library known as Lightning Web Component Open Source, which can implemented in any platform.
Use the following browser configuration options before testing:
about:flags => Enabled Experimental WebKit Features/Enable Experimental Web Platform
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
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
