Currently, the only way to set the rating on the <rating-element> is to construct the element, set the rating property on the object, and then put it on the page. Unfortunately, this is not how native HTML elements tend to work. Native HTML elements tend to update with both property and attribute changes.

Make the custom element update the view when the rating property changes by adding the following lines:

private _rating = 0;

set rating(value) {
  this._rating = value;

  if (!this.shadowRoot) {
    return;
  }

  const ratingEl = this.shadowRoot.querySelector<HTMLElement>('.rating');

  if (ratingEl) {
    ratingEl.innerText = `${this._rating}`;
  }
}

get rating() {
  return this._rating;
}

_rating = 0;

set rating(value) {
  this._rating = value;

  if (!this.shadowRoot) {
    return;
  }

  const ratingEl = this.shadowRoot.querySelector('.rating');

  if (ratingEl) {
    ratingEl.innerText = `${this._rating}`;
  }
}

get rating() {
  return this._rating;
}

1. Remove the constructor.
2. Declare a private _rating property set to 0.
3. Add a setter and getter for the rating property.
4. Update the rating element's text if it's available.

This means if you were to set the rating property on the element, the view will update; give it a quick test in your Dev Tools console! Select the <rating-element> and set the rating property to 5.

$0.rating = 5