ES6在扩展HTMLButtonElement时无法使用本机setter

ES6 Unable to use native setters when extending HTMLButtonElement

本文关键字：本机 setter 扩展 HTMLButtonElement ES6      更新时间：2023-09-26

我正试图弄清楚如何将本地setter和getter用于扩展的HTMLButtonElement。特别是"disabled"属性。

此处列出了该房产：https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement

示例代码如下：http://codepen.io/anon/pen/RWmKaw?editors=001

从上面的链接粘贴的代码块：

'use strict';
class TestButton extends HTMLButtonElement {
  attachedCallback() {
    this.appendChild(document.createTextNode('test'));
    this.addEventListener('click', (event) => {
      this.customFun();
    });
  }
  customFun() {
    alert('setting myself as disabled.');
    this.disabled = true;
  }
}
document.registerElement('test-button', TestButton);
document.body.appendChild(document.createElement('test-button'));

当我在设置或获取时访问禁用的属性时，我收到以下错误：

Uncaught TypeError: Illegal invocation(anonymous function) @ pen.js:33

我可以覆盖TestButton的setter和getter，但这并不能解决问题，只是解决了症状。

我还尝试使用以下语法：代码笔：http://codepen.io/anon/pen/NGVddj?editors=001

'use strict';
class TestButton {
  attachedCallback() {
    this.appendChild(document.createTextNode('test'));
    this.addEventListener('click', (event) => {
      this.customFun();
    });
  }
  customFun() {
    alert('setting myself as disabled.');
    this.disabled = true;
  }
}
document.registerElement('test-button', {prototype:TestButton, extends:'button'});
let myButton = document.createElement('button', 'test-button');
myButton.setAttribute('is', 'test-button');
myButton.customFun();
document.body.appendChild(myButton);

这只会导致我的自定义元素功能被剥离，我收到一个错误：

Uncaught TypeError: myButton.customFun is not a function

好的，我解决了：

'use strict';
class TestButton extends HTMLButtonElement {
  attachedCallback() {
    this.addEventListener('click', (event) => {
      this.customFun();
    });
  }
  customFun() {
    alert('setting myself as disabled.');
    this.disabled = true;
  }
}
document.registerElement('test-button', {
  prototype: TestButton.prototype,
  extends: 'button'
});
let myButton = document.createElement('button', 'test-button');
document.body.appendChild(myButton);

诀窍仍然是扩展HTMLButtonElement以获得继承父级属性的能力，但随后在寄存器中，使用TestButton.protype，并结合创建元素语法扩展语法修复它。

此外，删除"is"解决了这个问题。

相关文章：