Javascript CustomElementsV0：如何正确扩展本机HTML元素？

我想创建一个扩展HTMLInputElement的HTML自定义元素，并为焦点、更改、单击、按键等事件定义其默认行为

在放弃CustomElementV1（产生“非法构造函数”错误的super（）调用）之后，我尝试了CustomElementV0方法：

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'});

稍后将创建节点：

var n = new Xi();

我希望createdCallback函数中的this变量引用在执行“new Xi（）”时创建的DOM节点。但是，它引用窗口对象，因此，更改事件被多次注册，并为创建的每个元素触发一次：更改单个字段将触发更改事件的次数与DOM中x-input元素的次数相同

我在ChromeV54-v57上观察到了这种行为

---

实现预期行为（即只触发一次事件）的正确方法是什么？

正如注释中的链接所建议的，您不应该使用箭头函数定义

createdCallback

方法，因为它不会更改

此值

相反，请使用“Classic”
function（）
语法：

Xinput.createdCallback = function () {
  this.addEventListener('change',e=>
    console.info("field changed", e.target)
  );
};

正如注释中的链接所建议的，您不应该使用箭头函数来定义
createdCallback
方法，因为它不会更改
此
值

相反，请使用“Classic”
function（）
语法：

Xinput.createdCallback = function () {
  this.addEventListener('change',e=>
    console.info("field changed", e.target)
  );
};

，这根本不是“现有问题的完全复制品”。我已经习惯于使用箭头函数，而不考虑其含义。因此，感谢Andreas和Supersharp为我指出答案。至于这是否是重复的问题：如果这是重复的，那么所有因编程技能不足而产生的问题都应标记为重复。我将把这个问题留给聪明人去解决。这根本不是“现有问题的完全复制品”，我已经习惯于使用箭头函数而不考虑其含义。因此，感谢Andreas和Supersharp为我指出答案。至于这是否是重复的问题：如果这是重复的，那么所有因编程技能不足而产生的问题都应标记为重复。我将把这个问题留给聪明人去解决。