无法从其类方法的自定义元素扩展HTMLElement onclick

Question

我一直在研究自定义元素，我想在其中扩展其默认onclick行为。如果我将其添加到元素本身中就可以使用，但是在类中定义函数时它不起作用。我以为这可以用，我了解大多数javascript作用域定义概念，但是我似乎并不了解这一点，也无法找到有关此特定情况的信息。我缺少什么概念？

我找到了此参考，但我认为它不适用。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

请注意，类不能扩展常规（不可构造）对象。如果要从常规对象继承，则可以改用Object.setPrototypeOf（）：

class MyElement extends HTMLElement {
  constructor() {
    super();

    this.onclick = () => console.log('mySuperElement'); // Case 3: do not seems to work
  }

  connectedCallback() {
    this.style.display = 'block';

    let div = document.createElement('div');

    div.style.display = 'block';
    div.style.height = '50px';
    div.style.width = '50px';
    div.style["background-color"] = 'green';

    // div.onclick = () => console.log('myElementDiv'); // Case 4: Work but not exactly what I am looking for.

    this.appendChild(div);

    this.onclick = () => console.log('myElement'); // Case 2: do not seems to work
  }

  onclick() {
    console.log('mySuperElement'); // Case 1: do not seems to work
  }
}

customElements.define('my-element', MyElement)

<my-element></my-element>

当前使用Chrome 79.0.3945.88作为提琴。

谢谢

Answer 1

div中，如下所示：

div.addEventListener('click', this.yourFunction.bind(this));