如何在 vanilla js web 组件中添加内部方法？

Question

有一个任务——将一段可重用的代码插入到普通的 JS 组件中。

class Plane extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    if (!this.rendered) {
      this.render();
      this.rendered = true;
    }
  }
  render() {
    this.innerHTML = plane.innerHTML + plane_styles.innerHTML;
  }
}
window.customElements.define('plane-scheme', Plane);

const plane = document.createElement('plane');
plane.className = 'plane';
plane.innerHTML = `...`;

document.body.append(plane);

一切正常。但是，除了 HTML 元素本身之外，还必须包含几个信息处理函数。到目前为止，我不太明白如何实施它。我试图在构造函数中创建一个箭头函数，将其添加为一个单独的方法——零效果。如何正确实施？

Answer 1

自定义元素是类，所以学习：https://javascript.info/class

customElements.define('a-plane', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `A <span>${this.planetype}</span>`;
    this.onclick = (evt) => this.fly();
  }
  get planetype() {    // Getter
    return this.getAttribute("type");
  }
  set planetype(val) { // Setter
    if(!this.isConnected) console.error("I am not in the DOM yet");
    this.setAttribute("type", val);
    this.querySelector("span").innerHTML = val;
  }
  fly() { // Method
    this.classList.toggle("flying");
  }
});

const plane = document.createElement('a-plane');
document.body.append(plane);
plane.planetype = "Airbus"; // set After! the element is in the DOM

a-plane {
  display: block;
  cursor: pointer;
}
.flying {
  background: skyblue
}
a-plane.flying:after {
  content: " flying"
}

<a-plane type="Boeing"></a-plane>
<a-plane type="Fokker"></a-plane>