"Illegal invocation" 调用新创建的 Web 组件对象的成员时出错

"Illegal invocation" error for call to member of newly-created Web components object

当我尝试 运行 Chrome 中以下代码片段中的 clear 函数时,出现 Uncaught TypeError: Illegal invocation 错误。

我正在创建一个具有某些文本输入功能的网络组件。这是我的第一个方法,但我一直收到这个错误,我不知道它可能是什么。

var XEditProto = Object.create(HTMLInputElement.prototype);

XEditProto.clear = function() {
    this.value = '';
    return "Erased";
}

var Edit = document.registerElement('x-edit', {
    prototype: XEditProto,
    extends: 'input'
});
document.body.appendChild(new Edit());
var XEditProto = Object.create(HTMLInputElement.prototype);

XEditProto.clear = function() {
    this.value = '';
    return "Erased";
}

var Edit = document.registerElement('x-edit', {
    prototype: XEditProto,
    extends: 'input'
});
var x = document.body.appendChild(new Edit());

...

x.clear();

按预期工作