How do I define properties like placeholder or pattern using the following code:
Object.defineProperty(inputProto, 'placeholder', {value: 20, writable: true});
Although it works, when I check on the HTML, it shows as undefined.
Is there a way to define a property for a Web Component in JavaScript without explicitly setting it in the HTML?
Code Snippet:
var inputProto = Object.create(HTMLInputElement.prototype);
//JS API functions (component prototype)
inputProto.onClear = function() {
this.value = "";
this.style.position = "static";
this.placeholder = "New Text";
}
inputProto.setPos = function(x, y) {
this.style.top = x + "px";
this.style.left = y + "px";
this.style.position = "relative";
}
inputProto.setDimensions = function(width, height) {
this.style.width = width + "px";
this.style.height = height + "px";
}
inputProto.caps = function(input) {
input = this.value;
var regEx = /[A-Z]/;
var match = regEx.test(input);
if (match) {
alert("Valid")
} else {
alert("Not valid")
}
}
inputProto.lowerCaps = function(input) {
input = this.value;
var regEx = /[^A-Z]/;
var match = regEx.test(input);
if (match) {
alert("Valid")
} else {
alert("Not valid")
}
}
var EgComponent = document.registerElement('eg-input', {
prototype: inputProto,
extends: 'input'
});
var egcomp = new EgComponent();
//existing component function in the DOM
function test() {
egcomp.onClear();
egcomp.setDimensions(250, 15);
}
function test1() {
egcomp.setDimensions(350, 15);
}
function test2() {
egcomp.caps();
}
function test3() {
egcomp.lowerCaps();
}
function test4() {
egcomp.setPos(30, 580);
}
//adding the component to the HTML from the DOM
document.body.appendChild(egcomp);