The <template> tag is useful and performant, but it isn't packaged with the logic of the component, making it difficult to distribute a component in a single file.

Template elements also lend themselves to imperative code. In many cases this leads to less-readable code compared to declarative coding patterns.

This is where Lit templates comes in! Lit lets you write templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM. It is similar to JSX and Virtual DOM libraries but it runs natively in the browser and much more efficiently than VDOM in many cases.

Migrate the native web component <rating-element> to use a Lit template. Lit uses Tagged Template Literals – functions that take template strings as arguments with a special syntax.

Lit then uses <template> elements under the hood to provide fast rendering as well as providing some sanitization features for security.

Start by migrating the <template> in index.html into a Lit template by adding a render() method to the web component:

// Don't forget to import from Lit!
import {render, html} from 'lit';

export class RatingElement extends HTMLElement {
  ...
  render() {
    if (!this.shadowRoot) {
      return;
    }

    const template = html`
      <style>
        :host {
          display: inline-flex;
          align-items: center;
        }
        button {
          background: transparent;
          border: none;
          cursor: pointer;
        }

       :host([vote=up]) .thumb_up {
         fill: green;
       }

       :host([vote=down]) .thumb_down {
         fill: red;
       }
      </style>
      <button class="thumb_down">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
      </button>
      <span class="rating">${this.rating}</span>
      <button class="thumb_up">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
      </button>`;

    render(template, this.shadowRoot);
  }
}

You may also delete your <template> from index.html.

In this render() method you define a variable called template and invoke the html tagged template literal function. Also notice the text ${this.rating} inside the span element. This is a Lit expression, and it takes the place of setting the span's innerText imperatively.

Additionally, you call the Lit render() method which synchronously renders the template into the shadow root. Every time the component's render() method is called, the rating value will be updated.

Eventually you won't have to call render() imperatively at all. For now, call this.render() in the connectedCallback and remove the logic related to inserting the template and setting the innerText on the .rating span:

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

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

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

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

Now all your logic and templating is packaged in a single location! In the next step, you will clean up all the imperative code by moving it to the template.