Now that you have gotten rid of the <template> element in index.html, refactor the code to take advantage of Lit template features in the newly-defined render() method. You can start by leveraging Lit's event listener binding syntax:

<button
    class="thumb_down"
    @click=${() => {this.vote = 'down'}}>
...
<button
    class="thumb_up"
    @click=${() => {this.vote = 'up'}}>

Lit templates can add an event listener to a node with the @EVENT_NAME binding syntax where, in this case, you update the vote property every time these buttons are clicked.

Next:

• Clean up the _boundOn[Up|Down]Click class members.
• Clean up the event logic in connectedCallback.
• Remove disconnectedCallback.
• Remove the _on[Up|Down]Click methods.

export class RatingElement extends HTMLElement {
  private _rating = 0;
  private _vote: 'up'|'down'|null = null;

  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.render();
  }

  // remove disonnectedCallback and _onUpClick and _onDownClick
  ...
}

export class RatingElement extends HTMLElement {
  _rating = 0;
  _vote = null;

  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.render();
  }

  // remove disonnectedCallback and _onUpClick and _onDownClick
  ...
}

You were able to remove:

• The click listener logic from all three callbacks.
• The disconnectedCallback entirely.
• All of the DOM initialization code from the connectedCallback making it look much more elegant.
• _onUpClick and _onDownClick listener methods.

Finally, update the property setters to utilize the render method so that the DOM can update when either the properties or attributes change:

set rating(value) {
  this._rating = value;
  // remove the logic for imperatively setting the innerText
  // since it's handled in render()
  this.render();
}

...

set vote(newValue) {
  ...

  this._vote = newValue;
  this.setAttribute('vote', newValue!);
  // call this.render() at the end of the setter
  this.render();
}

set rating(value) {
  this._rating = value;
  // remove the logic for imperatively setting the innerText
  // since it's handled in render()
  this.render();
}

...

set vote(newValue) {
  ...

  this._vote = newValue;
  this.setAttribute('vote', newValue);
  // call this.render() at the end of the setter
  this.render();
}

Here, you:

• Removed the DOM update logic from the rating setter.
• Added a call to render from the vote setter.

Now the template is much more readable as you now can see where the bindings and event listeners are applied.

You should have a functioning <rating-button> that should look like this when the upvote is pressed!