My goal is to create a customized HTML element by extending HTMLInputElement and defining its default behavior for events like focus, change, click, keypress, etc.
After facing difficulties with CustomElementV1 due to an "Illegal constructor" error, I decided to explore the CustomElementV0 approach:
var Xinput = Object.create(HTMLInputElement.prototype);
Xinput.createdCallback = ()=>{
this.addEventListener('change',(e)=>{
console.info("field changed", e.target);
});
};
var Xi = document.registerElement('x-input', { prototype: Xinput, extends: 'input'});
The actual node creation happens later:
var n = new Xi();
Upon running this code, I discovered that the this variable in the createdCallback function does not refer to the DOM node created with "new Xi()". Instead, it points to the Window object. As a result, the change event gets registered multiple times, triggering once for each x-input element present in the DOM. This issue was observed while using Chrome version 54 to 57.
I am now seeking guidance on the correct approach to ensure the event fires only once as expected. Any insights would be greatly appreciated.