按钮功能

现在终于可以添加一些点击事件监听器来实现按钮功能了！

rating-element.

export class RatingElement extends HTMLElement {
  ...
  private _boundOnUpClick = this._onUpClick.bind(this);
  private _boundOnDownClick = this._onDownClick.bind(this);

  connectedCallback() {
    ...

    this.shadowRoot!
      .querySelector('.thumb_up')!
      .addEventListener('click', this._boundOnUpClick);
    this.shadowRoot!
      .querySelector('.thumb_down')!
      .addEventListener('click', this._boundOnDownClick);
  }

  disconnectedCallback() {
    this.shadowRoot!
      .querySelector('.thumb_up')!
      .removeEventListener('click', this._boundOnUpClick);
    this.shadowRoot!
      .querySelector('.thumb_down')!
      .removeEventListener('click', this._boundOnDownClick);
  }

  ...

  _onUpClick() {
    this.vote = 'up';
  }

  _onDownClick() {
    this.vote = 'down';
  }
}

export class RatingElement extends HTMLElement {
  ...
  _boundOnUpClick = this._onUpClick.bind(this);
  _boundOnDownClick = this._onDownClick.bind(this);

  connectedCallback() {
    ...

    this.shadowRoot
      .querySelector('.thumb_up')
      .addEventListener('click', this._boundOnUpClick);
    this.shadowRoot
      .querySelector('.thumb_down')
      .addEventListener('click', this._boundOnDownClick);
  }

  disconnectedCallback() {
    this.shadowRoot
      .querySelector('.thumb_up')
      .removeEventListener('click', this._boundOnUpClick);
    this.shadowRoot
      .querySelector('.thumb_down')
      .removeEventListener('click', this._boundOnDownClick);
  }

  ...

  _onUpClick() {
    this.vote = 'up';
  }

  _onDownClick() {
    this.vote = 'down';
  }
}

在这一步中，你：

将一些点击监听器绑定到元素上（.bind(this)），并将引用作为私有类成员保存。
在 connectedCallback 中监听 <button> 上的 click 事件。
在 disconnectedCallback 中清理这些监听器。
在点击监听器中适当地设置 this.vote。

恭喜，你现在有了一个功能完整的 Web Component；试试点击一些按钮吧！

坏消息是，元素定义大约有 100 行，HTML 文件有 38 行，对于这样一个简单的组件来说，代码相当冗长、命令式且难以阅读。这就是 Lit 发挥作用的地方！